<div> <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' }) } })
你可以狠狠的戳这里查看Demo!
Vuex
官方推荐的，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
$parent
父实例，如果当前实例有的话。通过访问父实例也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。
$root
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。通过访问根组件也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。
broadcast / dispatch
他俩是 vue@1.0 中的方法，分别是事件广播 和 事件派发。虽然 vue@2.0 里面删掉了，但可以模拟这两个方法。可以借鉴 Element 实现。有时候还是非常有用的，比如我们在开发树形组件的时候等等。
总结
以上所述是小编给大家介绍的Vue.js 父子组件通信的十种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: