vue组件之间的通信
在vue的开发过程中组件的通信有一下几种方式
父传子:props
子传父:emit
vuex状态管理
bus总线机制
var bus = new Vue()
Vue.component("xiongda",{ data:function(){ return { xiongDaInput:"" } }, methods:{ sendToXiongEr:function(){ //给熊二发送消息 //触发msgToXiongEr事件 bus.$emit("msgToXiongEr",this.xiongDaInput); this.xiongDaInput = ""; } }, template:` <div> <h1>我是熊大</h1> <input type="text" v-model="xiongDaInput"/> <button @click="sendToXiongEr">Click Me</button> </div> ` }) //熊二组件 Vue.component("xionger",{ data:function(){ return{ recvMsgIs:[] } }, template:` <div> <h1>我是熊二</h1> <p v-for="tmp in recvMsgIs">{{tmp}}</p> </div> `, mounted:function(){ // 给该组件绑定一个自定义事件和对应的处理函数 //调用bus中的on方法 //事件的触发一般是接收数据然后处理 var that = this; bus.$on("msgToXiongEr",function(msg){ //alert("自定义的事件触发,接收到的数据"+msg); that.recvMsgIs.push(msg); }) } }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>