Vue 組件&組件之間的通信 之 非父子關系組件之間的通信
阿新 • • 發佈：2019-04-27
return ole doc con vue amp spa .com lose 
Vue中不同的組件，即使不存在父子關系也可以相互通信，我們稱為非父子關系通信；
我們需要借助一個空Vue實例，在不同的組件中，使用相同的Vue實例來發送/監聽事件，達到數據通信的目的；
實例：
初始加載界面：
初始界面代碼：
<!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="
使用監聽事件後：
添加的監聽事件的代碼：
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 : { },
調用事件部分：
<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>
最終代碼：
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>非父子關系組件之間的通信
Vue 組件&組件之間的通信 之 非父子關系組件之間的通信