您现在的位置是：首页 > 文章详情

vue兄弟组件通信（非vuex）

日期：2018-04-17点击：334收藏

实例：点击按钮将组件A的"A数据"传到组件B的方框内

image

实现思路：根据官方文档的教程->使用一个空的 Vue 实例作为事件总线

官方文档

代码展示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript" src="lib/vue.min.js" ></script> <title>组件通讯</title> <style> .b{ width: 100px; height: 100px; border: 2px darkblue solid; } #app{ margin: 0 auto; width: 100px; text-align: center; height: 600px; } </style> </head> <body> <div id="app"> <mya></mya> <myb></myb> </div> </body> <template id="A"> <div> <button @click="senddata">点击</button> <h1>{{a}}</h1> </div> </template> <template id="B"> <div> <h1>{{b}}</h1> <div class="b"> {{a}} </div> </div> </template> <script> var bus = new Vue(); var vm=new Vue({ el:"#app", components:{ "mya":{ template:"#A", data:function(){ return { a:"A数据" } }, methods:{ senddata:function(){ bus.$emit("a-msg",this.a); } } }, "myb":{ template:"#B", data:function(){ return { b:"B数据", a:"" } }, mounted:function(){ var bthis=this; bus.$on("a-msg",function(a){ bthis.a=a; }); } } } }); </script> </html>