vue中组件通信问题

1.父组件向子组件传值

在父组件引用子组件的地方上绑定要传的值 ：自定义数据名="父组件中要传递的数据"

在子组件中用props接收父组件传递过来的数据 props:{data:String},便可以直接用插值语法使用。

结果：这样子组件里就可以使用父组件的数据。

2.子组件向父亲组件传值

首先在子组件中设置数据传递触发事件例如@click点击事件

 在父组件的子组件标签上使用子组件的中的自己的方法名来接收数据

 点击事件子组件中的数据就会渲染到父组件中如下图：

发送前：

 发送后：

3.非父子组件通讯

首先下载mitt库 npm i mitt
然后创建一个js文件用来传递数据时引用

如上图所示，bus为自定义变量名，需要在后续的组件传值中使用：组件中引入该js文件，并且使用bus.emit('自定义方法名'，发送的数据)来进行发送数据，用bus.on('自定义方法名',data=>{console.log(data)}  //data 就是传递过来的数据)接收数据，具体例子如下：

发送前：

发送后：