VUE 组件通讯 - 码农教程

 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