Vue 组件&组件之间的通信之非父子关系组件之间的通信

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="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>

使用监听事件后：

添加的监听事件的代码：

    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 组件&组件之间的通信 之 非父子关系组件之间的通信

猜你喜欢

Vue 组件&组件之间的通信之非父子关系组件之间的通信