Vue_(组件通讯)非父子关系组件通信

博客介绍了Vue中的非父子关系通信,借助空Vue实例,在不同组件中用相同实例发送/监听事件实现数据通信。还提到单项数据流,定义同级组件A和B,点击组件A按钮可将数据发向组件B,同时提醒数据中转时注意组件B的this关键字。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

  Vue单项数据流  传送门

  Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信

  我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的

  

  

  Learn

     一、单项数据流

 

  目录结构

  

  【每个demo下方都存有html源码】

 

一、单项数据流

  定义组件A和组件B,组件A和组件B同级关系,当点击<template-a>的button控件时,调用sendData函数,将template-a中的data数据发向template-b

    <template id="template-a">
        <div>
            <h1>my-component-a</h1>
            comA name : <span>{{name}}</span><br />
            <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>

 

  coma绑定template-a模块组件,comb绑定template-b模块组件,要进行数据中转时候,一定要注意template-b模块组件中的this关键字

let comA = {
            template :  "#template-a",
            data(){
                return {
                    name : "AdataGary"
                }
            },
            methods : {
                sendData(){
                    vm.$emit('send-event-a', this.name);
                }
            }
        }
        
        let comB = {
            template :  "#template-b",
            data(){
                return {
                    nameB : ''
                }
            },
            mounted(){
                /*vm.$on('send-event-a', function(value){
                    console.log(this);
                    this.nameB = value;
                });*/
                vm.$on('send-event-a', name => {
                    console.log(this);
                    this.nameB = name;
                })
            }
        }

 

  在Vue中注册申请

        let vm = new Vue({
            data : {
                msg : 'Garydat'
            }
        });
        new Vue({
            data : {
                
            },
            components : {
                "my-component-a" : comA,
                "my-component-b" : comB
            }
        }).$mount("#GaryId");

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <my-component-a></my-component-a>
            <my-component-b></my-component-b>
        </div>
    </body>

    <template id="template-a">
        <div>
            <h1>my-component-a</h1>
            comA name : <span>{{name}}</span><br />
            <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>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
    
        let comA = {
            template :  "#template-a",
            data(){
                return {
                    name : "AdataGary"
                }
            },
            methods : {
                sendData(){
                    vm.$emit('send-event-a', this.name);
                }
            }
        }
        
        let comB = {
            template :  "#template-b",
            data(){
                return {
                    nameB : ''
                }
            },
            mounted(){
                /*vm.$on('send-event-a', function(value){
                    console.log(this);
                    this.nameB = value;
                });*/
                vm.$on('send-event-a', name => {
                    console.log(this);
                    this.nameB = name;
                })
            }
        }
    
        let vm = new Vue({
            data : {
                msg : 'Garydat'
            }
        });
        new Vue({
            data : {
                
            },
            components : {
                "my-component-a" : comA,
                "my-component-b" : comB
            }
        }).$mount("#GaryId");
    
    </script>
</html>
Gary_non-fatherAndSon.html

 

转载于:https://www.cnblogs.com/1138720556Gary/p/10549831.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值