vue-组件（非父子组件间的数据传递）

一、简介

非父子组件间的通信，我们可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监视事件。

 

二、实现方法

第一步：定义空的Vue实例，实现事件的触发和侦听

var Event = new Vue();

第二步：触发事件

Event.$emit('事件名',数据)

 

第三步：侦听事件

Event.$on('事件名',回调函数)

 

实际应用中，涉及到更复杂的实现，需要用VueX来实现。

 

三、代码实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>非父子组件间的通信</title>
  6   <!--引入vue-->
  7   <script src="../js/vue.js"></script>
  8 </head>
  9 <body>
 10 
 11     <div id="hello">
 12         <my-a></my-a>
 13         <my-b></my-b>
 14         <my-c></my-c>
 15     </div>
 16 
 17     <template id='a'>
 18         <div>
 19             <h2>A组件：{{name}}</h2>    
 20             <button @click='sendAtoC'>将组件A的数据发送给组件C</button>
 21         </div>    
 22     </template>
 23 
 24     <template id='b'>
 25         <div>
 26             <h2>B组件：{{age}}</h2>    
 27             <button @click='sendBtoC'>将组件B的数据发送给组件C</button>
 28         </div>    
 29     </template>
 30 
 31     <template id='c'>
 32         <div>
 33             <h2>C组件：{{nameC}} {{ageC}}</h2>        
 34         </div>
 35     </template>
 36     
 37     <script>
 38 
 39         //创建空的Vue实例，用来触发和侦听事件
 40         var Event = new Vue();
 41 
 42 
 43         var A={
 44                     template:'#a',
 45                     data(){
 46                         return {
 47                             name:'王宇'
 48                         }
 49                     },
 50                     methods:{
 51                         sendAtoC(){
 52                             Event.$emit('data-a',this.name);    //$emit()触发事件
 53                         }
 54                     },
 55                 }
 56 
 57         var B={
 58                     template:'#b',
 59                     data(){
 60                         return {
 61                             age:20
 62                         }
 63                     },
 64                     methods:{
 65                         sendBtoC(){
 66                             Event.$emit('data-b',this.age);    //$emit()触发事件    
 67                         }
 68                     }
 69                 }
 70 
 71         var C={
 72                     template:'#c',
 73                     data(){
 74                         return {
 75                             nameC:'',//初始化变量
 76                             ageC:''
 77                         }
 78                     },
 79                     mounted(){    //在模板编译完成后执行
 80                         Event.$on('data-a',name=>{    //$on()侦听事件
 81                             this.nameC=name
 82                         });    
 83                         Event.$on('data-b',age=>{
 84                             this.ageC=age;
 85                         })
 86                     }
 87                 }
 88 
 89         //vue实例
 90         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
 91             el:'#hello',
 92             components:{
 93                 'my-a':A,
 94                 'my-b':B,
 95                 'my-c':C
 96             },
 97         });
 98     </script>
 99 </body>
100 </html>

 

posted @ 2021-09-09 14:12  AnnLing  阅读(167)  评论(0)    收藏  举报