Vue.js 父子组件通信的十种方式

下面是实现 EventBus 的简单代码：

<div id="app">  <child></child></div> 
// 全局变量 
let EventBus = new Vue() 
 
// 子组件 
let Child = Vue.extend({ 
  template: '<h2>child</h2>', 
  created () { 
    console.log(EventBus.message) 
    // -> 'hello' 
    EventBus.$emit('received', 'from child') 
  } 
}) 
 
new Vue({ 
  el: '#app', 
  components: { 
    Child 
  }, 
  created () { 
    // 变量保存 
    EventBus.message = 'hello' 
    // 事件监听 
    EventBus.$on('received', function (val) { 
      console.log('received: '+ val) 
      // -> 'received: from child' 
    }) 
  } 
}) 

• Vuex

官方推荐的，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• $parent

父实例，如果当前实例有的话。

通过访问父实例也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。

• $root

当前组件树的根 Vue 实例。

如果当前实例没有父实例，此实例将会是其自己。

通过访问根组件也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。

• broadcast / dispatch

他俩是 vue@1.0 中的方法，分别是事件广播 和 事件派发。

虽然 vue@2.0 里面删掉了，但可以模拟这两个方法。

可以借鉴 Element 实现。

有时候还是非常有用的，比如我们在开发树形组件的时候等等。

总结

啰嗦了这么多，希望看到的同学或多或少有点收获吧。

不对的地方还请留言指正，不胜感激。

父子组件间的通信其实有很多种，就看你在哪些情况下去用。

不同场景不同对待。

前提是你要心中有数才行!

通过大神之路还有很远，只要每天看看社区，看看文档，写写Demo，每天进步一点点，总会有收获的。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!