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，天天前进一点点，总会有收成的。

（编辑：湖南网）

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