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

時間 2019-11-29

標籤 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>