//建立一个空的Vue实例,将通信事件挂载在该实例上 //emptyVue.js import Vue from 'vue' export default new Vue() //兄弟组件a:childa.vue <template> <div> <span>A组件->{{msg}}</span> <input type="button" value="把a组件数据传给b" @click ="send"> </div> </template> <script> import vmson from "./emptyVue" export default { data(){ return { msg:"我是a组件的数据" } }, methods:{ send:function(){ vmson.$emit("aevent",this.msg) } } } </script> //兄弟组件b:childb.vue <template> <div> <span>b组件,a传的的数据为->{{msg}}</span> </div> </template> <script> import vmson from "./emptyVue" export default { data(){ return { msg:"" } }, mounted(){ vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数; console.log(val);//打印结果：我是a组件的数据 this.msg = val; }) } } </script> //父组件：parent.vue <template> <div> <childa><childa> <childb></childb> </div> </template> <script> import childa from "./childa"; import childb from "./childb"; export default { data(){ return{ msg:"" } }, components:{ childa, childb }, } </script>
到此，vue中的组件通信传值基本可以搞定了，但是对于大型复杂的项目，建议采用vuex 状态管理更适合....
推荐参考学习：https://vuex.vuejs.org/zh-cn/
总结
以上所述是小编给大家介绍的vue中的$emit 与$on父子组件与兄弟组件的之间通信方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: