组件高级通信

总结

组件通信方式：我们已经学习过的组件通信方式6种了

第一种：props

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

注意事项：

如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据

如果父组件给子组件传递的数据（非函数）：本质就是父组件给子组件传递数据

书写方式：3种

['toobs'],

{type:Array},

{type:Array,default:[]}

(['toobs']接收父组件传来的数据，(type:Array)接收的数据类型，default:[]默认值)

小提示：路由的props

书写形式：布尔值、对象、函数形式

第二种：自定义事件

适用于场景：子组件给父组件传递数据

$on与 $emit

第三种：全局事件总线$bus

适用于场景：万能

Vue.prototype.$bus = this;

第四种：pubsub.js，在React框架中使用比较多。（发布与订阅）（Vue很少用）

适用于场景：万能

第五种：Vuex

适用于场景：万能

第六种：插槽

适用于场景：父子组件通信----（一般结构）

默认插槽

具名插槽

作用域插槽

（忽略）案例准备

1）事件注意事项Event

原生DOM、组件标签

原生DOM，如<button></button>

组件标签，如<Event1></Event1>属于自定义事件

事件：系统事件 click、双击、鼠标系列等等

自定义事件

事件源、事件类型、事件回调

1：原生DOM---button可以绑定系统事件---click单击事件等等

2：组件标签---event1可以绑定系统事件（不起作用：因为属于自定义事件）---.native（可以把自定义事件变成原生DOM事件

2）v-model【组件通信方式一种】

v-model它是Vue框架中的指令，它主要结合表单元素一起使用（文本框、复选、单选等等）

它主要作用是收集表单数据

v-model实现原理：value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据通信

3）属性修饰符sync【组件通信方式一种】

可以实现父子组件数据同步。

:money.sync，代表父组件给子组件传递props【money】 给当前子组件绑定一个自定义事件（update:money）

4）$listeners与$attrs（组件通信方式一种）

它们两者都是组件实例的属性。可以获取到父组件给子组件传递props与自定义事件。

5）$children与$parent

ref可以获取到某一个组件，子组件

$children组件实例的属性，可以获取到当前组件的全部子组件【数组】（（但不能采用数组下标，因为可能乱序））

$parent组件实例的属性，可以获取到当前子组件的父组件，进而可以操作父组件的数据与方法

6）混入mixin

如果项目当中出现很多结构类似功能，想到组件复用。

如果项目当中很多的组件JS业务逻辑相似，想到minxin。【可以把多个组件JS部分重复、相似地方】

7）作用域 插槽

插槽：可以实现父子组件通信（通信的结构）

默认插槽

具名插槽

作用域插槽：子组件的数据来源于父组件，子组件是决定不了自身结构与外观。

（忽略）vue-helper提示 书写代码

报错：cmd运行npm run serve一直停留51%不动

解决

由于渲染原因。如出现标签未闭合等问题

路由文件router.js中先把全部注释，一个个路由组件打开，看哪个打开以后会出现这种问题，则是该组件的文件有问题。

渲染原因，该文件出现数字（报错）。

需要注意：只有一个根div标签，标签有<div>，则要有</div>，否则也会报错

报错Can't resolve '@pages/Communication/Communicaition'