如何实现组件之间的通信（父传子，子传父，兄弟组件互传）

一、父传子

1.父传子通用的方法就是借助props这个属性
（1）如下图我创建了一个Dom组件，并将它引入到父组件App.vue中

(2)下面我在父组件定义一个变量msg并赋值，然后通过在子组件上写上:msg='msg’的形式，将值传给子组件

(3)在子组件中通过props属性接收父组件传过来的值,获取后并将值赋值给子组件中的变量name

在页面中可以看到如下效果

二、子传父

1、方法一(通过props和回调函数形式)
(1)我在父组件创建一个方法dom通过在子组件上加入:dom='dom’的形式将其传给子组件、同时在父组件中设置一个变量用于接收dom方法中的参数

(2)在子组件中通过props接收父组件传过来的方法，同时在子组件中创建一个方法btndom用来触发父组件传过来的方法，并将子组件中的变量name作为参数传入

此时的this.name就是父组件中dom方法的参数value
2、方法2（通过自定义方法的方式）
(1)先在父组件创建一个带有参数value的dom方法，在通过往子组件添加自定义方法@parentdom='dom’的形式，将dom方法传给子组件

(2）在子组件先创建dombtn方法，往dombtn方法中加入this.$emit(‘parentdom’,this.name),用来触发父组件传过来的方法，this.name为子组件传给父组件的变量

此时的this.name就是父组件中dom方法的参数value

3、通过$emit和$on的形式进行子传父
(1)先在父组件中通过为子组件添加ref的方式为子组件绑定方法

(2)在子组件先创建dombtn方法，往dombtn方法中加入this.$emit(‘parentclick’,this.name),用来触发父组件为子组件创建的方法，this.name为子组件传给父组件的变量

此时的this.name就是父组件中parentclick方法的回调函数参数value

**

三、兄弟组件互传

1、此方法是通过绑定全局总线的形式，并通过on和emit来实现的方法的创建和触发
(1)先在vue的原型在vm上添加$bus(可以随意命名)

(2)如果该组件需要接收另一个组件传过来的数据，则需要在该组件中添加即创建方法

再在另一个组件触发此方法

此方法也可以实现跨多个组件传送数据，子传父，父传子还是尽量用前面几种简便的方法好点
2、第二种方法有一个名字叫(消息订阅与发布)
（1）实现消息订阅与发布功能的插件有很多种，但我这里使用pubsub-js插件，在vue中通过npm i pubsub-js，并引入到对应的组件中,在这里我创建了两个组件，Bom组件是用来接收消息的，Dom、组件是用来发送消息的
(2)先在Bom组件中设置对应的数据标识msg，并创建对应的回调函数用于接收消息，回调函数有两个形参，第一个指消息标识，我这边是msg，另一个则是Dom发送过来的消息

(3)再在发送消息的组件Dom中通过pubsub.publish(‘msg’,this.name)的方式发送消息name