vue2组件通信之$parent/$root

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2组件通信之$parent/$root相关的知识,希望对你有一定的参考价值。

参考技术A 兄弟组件之间通信可通过共同祖辈搭桥,$parent或$root

组件A监听数据

this.$parent.$on('foo',msg=>

console.log(msg)

)

this.$root.$on('foo',msg=>

console.log(msg)

)

组件B传递数据

this.$parent.$emit('foo','传输数据')

this.$root.$emit('foo',传输数据)

vue2.0 父子组件通信 兄弟组件通信

父组件是通过props属性给子组件通信的来看下代码:

父组件:

<parent>
    <child :child-com="content"></child> //注意这里用驼峰写法哦
</parent>

data(){
    return {
        content:sichaoyun
    };
}

子组件通过props来接受数据

第一种方法

props: [childCom‘]

第二种方法

props: {
    childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦
}

第三种方法

props: {
    childCom: {
        type: String,
        default: sichaoyun 
    }
}

子组件与父组件通信

vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据,废话少说,上干货

子组件代码

<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit(showbox‘,the msg‘); //触发showbox方法,‘the msg‘为向父组件传递的数据
    }
}

父组件

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

methods: {
    toshow(msg) {
        this.msg = msg;
    }
}

兄弟组件之间的通信

我们可以实例化一个vue实例,相当于一个第三方

let vm = new Vue(); //创建一个新实例

组件他哥

<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit(blur‘,sichaoyun); //触发事件
    }
}

组件小弟接受大哥命令

<div></div>
created() {
  vm.$on(blur‘, (arg) => { 
        this.test= arg; // 接收
    });
}

搞定!

以上是关于vue2组件通信之$parent/$root的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 父子组件通信 兄弟组件通信

vue2.0 父子组件通信 兄弟组件通信

vue2.0父子组件以及非父子组件如何通信

vue2.0父子组件以及非父子组件如何通信

vue2.0父子组件以及非父子组件如何通信

vue2.0嵌套组件之间的通信($refs,props,$emit)