标签：v-model log type port java input 运行 ems style
这里介绍一下适合兄弟组件和父子，祖孙组件之间的传值方式-事件总线，废话不多说，直接上代码
总结：说白了这东西就是一种发布订阅的模式，发数据的一方用$emit发，各个接听方用$on接受对应key的事件，on的时候，就选择在DOM挂在完毕以后进行监听，通过这样的事件去修改数据，完成传递工作，感兴趣的同学可以吧这个代码拿下去直接调试运行一下看看
<!DOCTYPE html> <html lang="en"> <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" /> <title>Document</title> </head> <body> <div id="app"> <com1></com1> </div> <template id="com1"> <div> <h1>我是父组件</h1> <span>我接受孙组件的数据：{{msg}}</span> <input type="text" ref="txtMsg" v-model="msg" /> <com2></com2> <com3></com3> </div> </template> <template id="com2"> <div> <h3>我是兄弟组件2</h3> <button @click="SendMsg"> 发送到兄弟组件3 </button> <span> 我要接受兄弟组件com3的值：{{receiveTitle}},{{receiveMsg}} </span> </div> </template> <template id="com3"> <div> <h3>我是兄弟组件3</h3> <button @click="sendMsg"> 发送到兄弟组件2 </button> <span> 我要接受兄弟组件com2的值：{{receiveTitle}},{{receiveMsg}} </span> <com4></com4> </div> </template> <template id="com4"> <div> <h5>我是孙组件</h5> <span> 我要接受来自祖组件com1的值:{{sunMsg}} 我要改变祖组件的值 <input type="text" ref="txtMsg" v-model="sunMsg" /> </span> </div> </template> <script src="/lib/vue/vue.js"></script> <script type="text/javascript"> var eventBus = new Vue(); var com4 = { name: "com4", template: "#com4", data() { return { sunMsg: "" }; }, watch: { sunMsg() { eventBus.$emit("SetGrandFatherMsg", this.sunMsg); } }, mounted() { eventBus.$on("SetSunMsg", msg => { //console.log(msg); this.sunMsg = msg; }); } }; var com2 = { name: "com2", template: "#com2", data() { return { com2Title: "你好", com2Msg: "这是来自com2的消息", receiveTitle: "", receiveMsg: "" }; }, mounted() { eventBus.$on("SendCom2Msg", (title, msg) => { this.receiveMsg = msg; this.receiveTitle = title; }); }, methods: { SendMsg() { eventBus.$emit("SendCom3Msg", this.com2Title, this.com2Msg); } } }; var com3 = { name: "com3", template: "#com3", data() { return { com3Title: "hello", com3Msg: "This is the message from to COM3", receiveTitle: "", receiveMsg: "" }; }, mounted() { eventBus.$on("SendCom3Msg", (title, msg) => { this.receiveMsg = msg; this.receiveTitle = title; }); }, components: { com4 }, methods: { sendMsg() { eventBus.$emit("SendCom2Msg", this.com3Title, this.com3Msg); } } }; var com1 = { name: "com1", template: "#com1", data() { return { msg: "" }; }, mounted() { eventBus.$on("SetGrandFatherMsg", msg => { this.msg = msg; }); }, watch: { msg: { handler: function(newVal, oldVal) { console.log(this.msg); eventBus.$emit("SetSunMsg", this.msg); } } }, components: { com2, com3 } }; new Vue({ el: "#app", components: { com1 } }); </script> </body> </html>
标签：v-model log type port java input 运行 ems style
原文地址：https://www.cnblogs.com/llcdbk/p/12173530.html
