vue中的组件通讯

组件通讯

因为组件是一个独立的个体，组件无法使用到外部的数据

但是在真实开发中，多个组件之间是需要相互使用彼此的数据的，因此需要使用组件通讯的技术，让组件之间能够相互传值。

组件通讯分为三类

• 父组件传递值给子组件
• 子组件传递值给父组件
• 非父子组件之间的传值

组件通讯-父传子

• 定义两个组件

Vue.component("parent", {
    template: `
    <div class="parent">
    <p>这是父组件</p>
    <son></son>
    </div>
    `,
    data () {
        return {
            car: '玛莎拉蒂',
            month: 1000000
        }
    }
});

Vue.component("son", {
    template: `
    <div class="son">
    <p>这是子组件</p>
    </div>
    `
});

<div id="app">
    <parent></parent>
</div>

• 组件的通讯

1. 在父组件的模版中，给子组件增加一个自定义的属性。
<son :car="car"></son>

2. 子组件通过props属性进行接收
//接收父组件传递过来的值
props: ['car']

3. 子组件使用父组件传递过来的值
template: `
<div class="son">
	<p>这是子组件</p>
	<p>这是父组件传递过来的值----{{car}}</p>
</div>
`,

prop接收数据的方式（1. 数组 2. 对象）

1. 数组
	props: ['parentDate1','parentDate2']
2. 对象
	prop:{
		parentDate1: Array,
		parentDate2: String
	}

注意：props负责获取父组件的传递过来的，props中的值是只读的，不允许修改

组件通讯-子到父

参考链接：https://blog.csdn.net/jsxiaoshu/article/details/79058940

整体思路

1. 父组件给子组件注册一个自定义事件
2. 子组件触发这个自定义事件，触发事件时把数据传递给父组件

• 父组件给子组件注册事件

<son @fn='getData'></son>
methods: {
    //1. 父组件中定义了一个方法，用于获取数据
    getData () {
        console.log("父组件中提供的方法");
    }
}

• 子组件触发自定义事件，并且把要传递的数据作为参数进行传递

//$emit可以出发当前实例的事件
this.$emit('getData', this.car);

• 父组件获取值

methods: {
    //1. 父组件中定义了一个方法，用于获取数据
    getData (skill) {
        console.log("父组件中提供的方法", skill);
        this.skill = skill;
    }
}

案例-评论列表

• 父到子
• 子到父
• es6中属性的简写

组件通讯-非父子

非父子组件之间通过一个空的Vue实例来传递数据。

const bus = new Vue();   //bus:公交车  事件总线

• 核心逻辑

组件A给组件B传值：
1. 组件A给bus注册一个事件，监听事件的处理程序
2. 组件B触发bus上对应的事件，把 值当成参数来传递
3. 组件A通过事件处理程序获取数据

• 组件A给bus注册事件

 //rose在组件创建的时候，给bus注册了一个事件
created () {
    bus.$on("get", (msg)=>{
        console.log("这是rose注册的事件", msg);
        this.msg = msg;
    });
}

• 组件B触发bus的事件

<button @click="send">表白</button>

methods: {
    send() {
        bus.$emit("get", this.msg);
    }
}

• 组件A通过事件处理程序可以获取到传递的值

bus.$on("get", (msg)=>{
    console.log("这是rose注册的事件", msg);
    this.msg = msg;
});

注意点：1. 必须是同一辆公交车 2. 注册的事件和触发的事件必须保持一致

案例：开关灯案例

bus是一种通用的组件通讯方案

我们有三种组件通讯的方案

1. 父父子
2. 子传父
3. 非父子（bus）

其实bus方案也适用于父传子和子传父的方案。