组件通信方式

总结

1. props
   1. 特殊情况：路由传递props
      1. 1:布尔值类型，把路由中params参数映射为组件props数据
      2. 2:对象，静态数据，很少用
      3. 3:函数，可以把路由中params|query参数映射为组件props数据
2. 自定义事件 $emit $on
3. $bus 全局事件总线
   1. 组件实例的原型的原型指向的Vue.prototype
4. pubsub-js【发布订阅消息】
5. Vuex
6. 插槽——-父子通信【结构】
7. v-model
8. sync修饰符
9. $attrs与$listeners
10. $children与$parent
11. 作用域插槽

    v-model实现组件通信

    实现原理 :value @input 还可以实现父子数据同步

    原生dom实现

    <span>{{msg}}</span>
    <!-- 原生DOM当中是有oninput事件：当表单元素发生文本的变化的时候就会立即出发 -->
    <!-- 1.v-bind绑定msg，2.将value值赋给msg实现双向绑定 -->
    <input type="text" :value="msg" @input="msg = $event.target.value"/>

    并非原生dom实现

    ```html {{msg}}

<a name="W9cAN"></a>
## 属性修饰符.sync
组件通信方式的一种(类似v-model), 可以实现父子组件数据同步
<a name="Sccoa"></a>
### 不使用sync时
```html
<!--我是父组件, 1.传递参数money 2.传递自定义事件"update:money"-->
<Child :money="money" @update:money="money = $event"></Child>
<!--我是子组件,1.添加点击时间,触发父组件的自定义事件"update:money"-->
<button @click="$emit('update:money',money - 100)">花钱</button>

使用sync时

与不使用sync差别在于:money.sync的写法默认传递自定义事件”update:money“

<!--我是父组件, 这种写法做了两件事:1.传递参数money 2.传递自定义事件"update:money"-->
<Child :money.sync="money"></Child>
<!--我是子组件,1.添加点击时间,触发父组件的自定义事件"update:money"-->
<button @click="$emit('update:money',money - 100)">花钱</button>

$attrs与$listeners

$attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接受）
$listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）

做一个修改element button的例子，

1. 鼠标hover添加一个title
2. 接收父组件数，
3. 调用父组件的方法 ```html

<a name="qsNy1"></a>
## $children与$parent
ref:可以在父组件内部获取子组件---实现父子通信  --推荐<br />$children:可以在父组件内部获取全部的子组件【返回数组】 --不推荐<br />$parent:可以在子组件内部获取唯一的父组件【返回组件实例】 --推荐
<a name="BTsNw"></a>
### ref
```html
<!-- ref获取子组件实例 -->
<Son ref="xm" />
<!-- 父组件触发修改子组件数据money -->
this.$refs.xm.money = 100;
<!-- 父组件触发修改子组件方法tinghua -->
this.$refs.xm.tinghua();

$children

<!-- 我是父组件, 渲染子组件son -->
<Son/>
<!-- 父组件直接通过this.$children触发修改子组件数据money -->
<!--建议用枚举获取子组件：因为没办法确定到底是那个子组件-->
this.$children[0].money = 100;

$parent

<!-- 我是父组件, 渲染子组件son -->
<Son/>
<!-- 子组件直接通过this.$parent触发修改子组件数据money -->
this.$parent.money = 100;