11 【组件通信】

23.组件通信

23.1props

适用于的场景:父子组件通信

注意事项:

如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据

如果父组件给子组件传递数据(非函数):本质就是父组件给子组件传递数据

书写方式:3种

[‘todos’],{type:Array},{type:Array,default:[]}

特殊情况：路由传递props
1:布尔值类型，把路由中params参数映射为组件props数据
2:对象，静态数据，很少用
3:函数，可以把路由中params|query参数映射为组件props数据

23.2自定义事件

使用于场景:子组件给父组件传递数据

$on与$emit

• $emit绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

23.3全局事件总线$bus

使用于场景:万能

组件实例的原型的原型指向的Vue.prototype

Vue.prototype.$bus = this;

• 对于比较小型的项目，没有必要引入 vuex 的情况下，可以使用 eventBus。
• 它的实现思想也很好理解，在要相互通信的两个组件中，都引入同一个新的vue实例，然后在两个组件中通过分别调用这个实例的事件触发和监听来实现通信。

23.4pubsub-js

适用于场景:万能

vue当中几乎不用（因为vue中有全局事件总线和这个第三方提供的库功能重复）

在React框架中使用比较多(发布与订阅)

23.5Vuex

适用于场景:万能

数据非持久化

核心概念：
State：保存所有组件的共享状态
Getters：类似状态值的计算属性
Mutations：修改 State中状态值的唯一方法，里面包含状态变化监听器和记录器
Actions：用于异步处理 State中状态值，异步函数结束后调用Mutations
Modules：当一个 State 对象比较庞大时，可以将 State 分割成多个Modules 模块。

23.6插槽

适用于场景:父子组件通信 — (结构)

默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。

• 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

23.7小总结

1. 可以实现任意组件的通信的方法有两个：事件总线 和 Vuex，事件总线难维护数据但轻量，Vux维护数据方便但比较重量。
2. 可以实现父与子孙跨越层级通信的方法也有两个：$attrs/$listeners 和 provide/inject ，$attrs/$listeners 具有响应性且可以双向通信，provide/inject无响应性且只能单向通信（父传子）
3. 只能实现父与子组件通信的方法有一个：props/emit，方法比较基础，适合只有父子组件通信的方法，若想跨层级通信需要中间组件做转发，比较麻烦。

23.8v-model

CustomInput.vue

<template>
  <div style="background: #ccc; height: 50px;">
    &l