Vue 組件&組件之間的通訊之非父子關係組件之間的通訊

時間 2020-05-05

標籤 vue 組件之間通訊父子關係简体版

原文原文鏈接

Vue中不一樣的組件，即便不存在父子關係也能夠相互通訊，咱們稱爲非父子關係通訊；javascript

咱們須要藉助一個空Vue實例，在不一樣的組件中，使用相同的Vue實例來發送/監聽事件，達到數據通訊的目的；html

實例：vue

初始加載界面：java

初始界面代碼：ide

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>非父子關係組件之間的通訊</title>
</head>
    <body>
        <div >
            <my-component-a></my-component-a>
            <my-component-b></my-component-b>
        </div>
    </body>

    <template id="template-a">
        <div>
            <h1>my-component-a</h1>
            
            <hr />
        </div>
    </template>
    
    <template id="template-b">
        <div>
            <h2>my-component-b</h2>
            
            <hr />
        </div>
    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript"> let comA = { template : "#template-a", } let comB = { template : "#template-b", } new Vue({ data : { }, components : { "my-component-a" : comA, "my-component-b" : comB } }).$mount("div"); </script>
</html>

使用監聽事件後：this

添加的監聽事件的代碼：spa

let comA = { template : "#template-a", data(){ return { name:'perfect' } }, methods:{ sendData(){ vm.$emit('send-event-a',this.name); } } } let comB = { data(){ return{ nameB:'' } }, template : "#template-b", mounted(){ vm.$on('send-event-a',name=>{//監聽數據
                        console.log(this); this.nameB=name; }) } } let vm=new Vue({ data:{ msg:'cool' } }); new Vue({ data : { },

調用事件部分：code

<template id="template-a">
        <div>
            <h1>my-component-a</h1> comA name:<span>{{name}}</span>
            <button @click="sendData">發送數據給comB</button>
            
            <hr />
        </div>
    </template>
    
    <template id="template-b">
        <div>
            <h2>my-component-b</h2> comB name:<span>{{nameB}}</span>
            
            <hr />
        </div>
    </template>

最終代碼：component

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>非父子關係組件之間的通訊</title>
 6 </head>
 7     <body>
 8         <div >
 9             <my-component-a></my-component-a>
10             <my-component-b></my-component-b>
11         </div>
12     </body>
13 
14     <template id="template-a">
15         <div>
16             <h1>my-component-a</h1>
17             comA name:<span>{{name}}</span>
18             <button @click="sendData">發送數據給comB</button>
19             
20             <hr />
21         </div>
22     </template>
23     
24     <template id="template-b">
25         <div>
26             <h2>my-component-b</h2>
27             comB name:<span>{{nameB}}</span>
28             
29             <hr />
30         </div>
31     </template>
32 
33     <script type="text/javascript" src="../js/vue.js" ></script>
34     <script type="text/javascript">
35     
36         let comA = { 37             template :  "#template-a", 38  data(){ 39                 return { 40                     name:'perfect'
41  } 42  }, 43  methods:{ 44                 
45  sendData(){ 46                     vm.$emit('send-event-a',this.name); 47  } 48  } 49         
50         
51  } 52         
53         let comB = { 54             
55  data(){ 56                 return{ 57                     nameB:''
58  } 59  }, 60             template :  "#template-b", 61  mounted(){ 62                 
63                 vm.$on('send-event-a',name=>{//監聽數據
64                         console.log(this); 65                     
66                     this.nameB=name; 67  }) 68  } 69             
70     
71  } 72         let vm=new Vue({ 73             
74  data:{ 75                 msg:'cool'
76  } 77  }); 78     
79         
80         new Vue({ 81  data : { 82                 
83  }, 84  components : { 85                 "my-component-a" : comA, 86                 "my-component-b" : comB 87  } 88         }).$mount("div"); 89     
90     </script>
91 </html>