冇事来学系--Vue2.0中组件之间的数据共享

---

theme: fancy

组件之间的数据共享

父子组件之间的数据传递

1. 父组件向子组件共享数据，要使用自定义属性

```js // 父组件 // 使用子组件，通过属性向子组件传值，可以是任意值、方法，甚至是父组件对象this // 注意：这里如果没用v-bind，则传递的是字符串message和userinfo // 注意：age="18" --> 表示传入的age是一个字符串18；:age="18" --> 表示传入的age是数字18 // 使用了v-bind，则属性值就是一个js表达式

```

```js // 子组件

Son 组件

父组件传递过来的msg值是：{{ msg }}

父组件传递过来的user值是：{{ user }}

```

在使用Son组件的时候，通过v-bind绑定自定义属性，把父组件里面的message和userinfo的数据分别赋给msg和user，也就传递到Son。在Son组件中也能使用这两个数据

实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。

2. 子组件向父组件共享数据

在子组件中通过 $emit( )来自定义事件，实现子向父传递数据

$emit('事件名称', 需要传递的参数 )

``` // click点击事件的本质(vue是怎么操作的) $emit('click', { clientX: '', clientY: '', target: dom元素

})

// eg: // 子组件通过定义事件child-msg的方式将msg传给父组件 // 子组件中有个button按钮，并为其添加click事件

---

// 父组件在使用子组件的时候，绑定子组件自定义的child-msg事件

```

---

兄弟组件之间的数据共享

在vue2中，兄弟组件之间的数据共享的方案是EventBus

EventBus使用步骤

1. 创建eventBus.js模块，并向外共享一个Vue实例对象
2. 在数据发送方，调用 bus.$emit( '事件名称', 要发送的数据 ) 方法触发自定义事件 (触发事件)

3. 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件 (绑定事件)，用事件处理函数的形参来接收数据 (事件被触发了就会执行回调函数)

例子：

``` // eventBus.js文件(核心)

import Vue from 'vue'

// 向外共享Vue的实例对象 export default new Vue()

// 谁导入eventBus.js,谁就能获得一个Vue实例对象 ```

``` // 兄弟组件Left(数据发送方)

```

``` // 兄弟组件Right(数据接收方)

```

总结：

1. 接收方使用$on( )绑定事件

2. 发送放$emit( )触发事件，并传递参数

3. 接收方的自定义事件被触发了，执行回调函数，用形参接收发送方的数据

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖