javascript - VUE2 父组件怎么向子组件广播事件 ?$broadcast还能用吗?
伊谢尔伦
伊谢尔伦 2017-04-11 12:06:14
[JavaScript讨论组]

VUE2 父组件怎么向子组件广播事件 ?$broadcast还能用吗?

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(6)
PHPz

可以通过子组件的$emit()通知父组件,父组件监听然后在作出操作,比如:

子组件:
this.$emit('loadData')

父组件:
<state @loadData="getItems"></state>

恩,大概就是这个样子了

ringa_lee

已经被移除,
详情见vue2文档
http://cn.vuejs.org/v2/guide/...和-broadcast-替换

PHP中文网

Vue2中已经废弃了该事件,父子组件的通信通常使用props+emit事件的方式或者直接使用vuex从而减少事件的使用,如果楼主非要用事件的方式可以考虑vue2中的事件中心的概念()。

巴扎黑

$broadcast已经废弃了
凡是事件都可以用新的事件系统($on(eventName) & $emit(eventName))来代替
官方同时推荐使用vuex之类应用状态管理方案

但如果只是父子间需要经由事件触发通信
完全可以在父组件的事件回调中用refs调用子组件的方法

大家讲道理

使用$refs直接调用
大概这样

子组件sub.vue
<template>
  <p>
  </p>
</template>

<script>
export default {
  name: 'sub',
  methods: {
    log() {
      console.log(1111111);
    },
  },
};
</script>

父组件 index.vue
<template>
  <p>
  <sub ref="aaa"></sub>
  </p>
</template>

<script>

import sub from '../components/sub';

export default {
  name: 'index',
  components: {
    sub,
  },
  mounted() {
    this.$refs.aaa.log();
  },
};
</script>

<style>
</style>
迷茫

可以用Bus啊~

// bus.js
import Vue from 'vue'
export default new Vue()
// Parent.vue
import Bus from '../bus'
...
export default{
    data(){
        return {
            getVal:''
        }
    },
    mounted(){
        Bus.$on(val=>{
            this.getVal = val
        })
    },
    watch:{
        getVal(val){
            if(val){
                //do something...
            }
        }
    }
}
// Child.js
import Bus from '../bus'
...
export default{
    data(){
        return {}
    },
    mounted(){
        Bus.$emit('getVal','balabalabala...')
    }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号