1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="./js/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 12 13 </div> 14 15 <script> 16 17 let bus=new Vue(); 18 let child={ 19 template: ‘<div>\n‘ + 20 ‘ 子组件:\n‘ + 21 ‘ <span v-on:click="childClick">{{inputName}}</span>\n‘ + 22 ‘<input type="button" value="点击触发" @click="childClick">‘+ 23 ‘ </div>‘ 24 , 25 props:{ 26 27 inputName: String, 28 required: true 29 30 }, 31 data(){ 32 return { 33 childValue:‘子组件向父组件传值‘ 34 } 35 36 }, 37 methods:{ 38 childClick(){ 39 console.log("======="+this.childValue); 40 // this.$emit(‘childByValue‘, this.childValue); 41 bus.$emit(‘childByValue‘,this.childValue); 42 } 43 } 44 }; 45 let vm=new Vue({ 46 el:"#app", 47 data:{ 48 name:‘‘ 49 }, 50 components:{ 51 child 52 }, 53 methods:{ 54 childByValue: function (childValue) { 55 // childValue就是子组件传过来的值 56 console.log(childValue); 57 this.name = childValue 58 } 59 }, 60 mounted() { 61 let $_that=this; 62 bus.$on(‘childByValue‘,(data)=>{ 63 console.log("箭头函数="+data); 64 $_that.name=data; 65 }) 66 }, 67 template:‘ <div>\n‘ + 68 ‘ 父组件:\n‘ + 69 ‘ <input type="text" v-model="name">\n‘ + 70 ‘ <br>\n‘ + 71 ‘ <br>\n‘ + 72 ‘ <!-- 引入子组件 -->\n‘ + 73 ‘ <child :inputName="name" v-on:childByValue="childByValue"></child>\n‘ + 74 ‘ </div>‘ 75 }); 76 </script> 77 </body> 78 </html>
中央消息总线通讯 可以是任意关系的组件通讯
原文：https://www.cnblogs.com/yxlawyer/p/13782451.html