Vue 父传子，子传父，兄弟组件通信的使用

Vue组件传值：

1.父传子

        父：自定义属性名 + 数据（要传递）=> :value="数据"

        子：props ["父组件上的自定义属性名“] =>进行数据接收

步骤：

 首先建立俩个Vue的组件，例father.vue,child.vue

 在father.vue的组件写上

记住，我们的template下，只能拥有一个标签

在child.vue的组件写上

然后把子组件的内容引入到父组件里，于是在father.vue中的script标签里导入

接着，注册自定义标签

data用return返回的含义：

    (1)使用return 出来的数据只能在当前组件中使用，不会影响其他组件

     (2)当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data函数，从而返回初始数据的一个全新副本数据对象。

在组件中绑定data数据的author,在自定义标签中传递要传递的值

最后，在child.vue组件中利用props来接收传递来的参数并在上面的模板中运用传递来的参数

father.vue全部代码如下：

child.vue全部代码如下：

2.子传父

    子：this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称='回调函数'

    父：methods: {    回调函数() {      //逻辑处理  }  }

步骤：

于首先在子组件，写点击事件。实现点击一个按钮，使子组件的值传到父组件

然后在父组件中接收传递的值利用的是v-on（简写 @）

在method写方法

父组件全部代码如下：

3.兄弟组件（需要有共同的父组件）

              通过中央通信 let bus = new Vue（）

             A：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)}  发送

             B：created （）{bus.$on(‘A发送过来的自定义事件名’，函数)}  进行数据接受

创建bus.js做为公共的仓库文件

bus.js内容为

分别创建两个组件：child1.vue,child2vue

child1代码：

child2代码：

通过周期函数mounted拿到值

在父组件中引入

引用

挂载

调用

4.子组件调用父组件方法

父组件

子组件