vue中组件的通信

分析一下自学前端的笔记经验，知识有问题希望大家指教，谢谢。

1.父传子数据通信

1. 父组件

父组件通过给父组件里面的子元素标签绑定的形式传递例如

<Cd :Cdlist="ListData" :TwoData="TwoData" ></Cd>

绑定的值是父组件要给子组件传递的值例如（ListData,TwoData）

2.子组件

子组件通过props进行接收父组件传递的数据例如

props: { Cdlist: {type: Array,}, TwoData: { type: Array, }, },

其中注意要写传递的类型type不然会报错。拿到数据就可以在子组件用了

2.子传父数据通信

1.子组件

通过一个事件绑定例如（ <button @click="childTitle">我给父组件赋值）先写一个点击事件，然后在methods中写这个事件例如

childTitle() { this.$emit("changeTitle", this.SixData) },

其中this.SixData为需要传递的值

2.父组件

通过给子元素标签绑定一个事件例如

<Cd @changeTitle="parentTitle"></Cd>

然后在methods中对这个方法进行处理例如

parentTitle(e) {this.forData = e;},

其中e就是传递过来的值SixData注意forData为自己在父组件里面创建的值用来接收传递过来的值。而最后得要的就是forData这就是子组件传递过来的值。

3.同级组件之间的通信

1.首先在main.js同级目录下新建一个bus.js文件

import Vue from 'vue'
export default new Vue()​

2.分别在需要通信的两个组件之间引入这个文件

3.在需要传递的数据写入

    this.$nextTick(() => {  
      //解决第一次监听不到数据  
      Bus.$emit('infoData', row);  
    });

4.在需要接受的组件中写入

    created() { 
   Bus.$off('infoData'); 
 },