// ParentComponent 父组件 <template> <div> {{message}} <br> <br> <component-a/> </div> </template> <script> import Vue from 'vue' let bus=new Vue(); export default { name: "ParentComponent", data(){ return{ message:'', } }, components:{ componentA:{ template:'<button @click="handleClick">传递事件</button>', methods:{ handleClick(){ bus.$emit('on-message','来自子组件component-a的内容') } } } }, mounted(){ bus.$on('on-message',(msg)=>{ this.message=msg; }); } } </script>
结果如下：
以上例子中：首先创建了一个bus的空Vue实例，里面没有任何内容，然后全局定义了组件component-a,，在父组件ParentChild的生命周期mounted钩子函数中监听来自bus的事件on-message。而在组件component-a中，点击按钮会通过bus把事件on-message发出去，父组件会接受来自bus的事件，改变message的值。
这种方法巧妙轻量的实现了任何组件之间的通信，包括父子，兄弟，跨级组件。
5.状态管理与Vuex与总结
在实际业务中，经常会有跨组件共享数据的需求，如果项目不复杂，使用bus就能简单的解决问题，但是使用bus在数据的管理、维护、架构设计上还只是一个简单的组件，在大型单页应用，多然开发的项目中，Vuex能更加优雅和高效的完成状态管理。
总结
以上所述是小编给大家介绍的Vue.js组件间通信方式总结【推荐】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: