总结
组件通信方式:我们已经学习过的组件通信方式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
适用于场景:万能
第六种:插槽
适用于场景:父子组件通信----(一般结构)
默认插槽
具名插槽
作用域插槽
(忽略)案例准备
![](https://i-blog.csdnimg.cn/blog_migrate/5c6b9ed185d72e3234d8f5b6fefa93c3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0d4cfe2e516038e9a7f1017861602a4d.png)
1)事件注意事项Event
原生DOM、组件标签
原生DOM,如<button></button>
组件标签,如<Event1></Event1>属于自定义事件
事件:系统事件 click、双击、鼠标系列等等
自定义事件
事件源、事件类型、事件回调
1:原生DOM---button可以绑定系统事件---click单击事件等等
2:组件标签---event1可以绑定系统事件(不起作用:因为属于自定义事件)---.native(可以把自定义事件变成原生DOM事件
![](https://i-blog.csdnimg.cn/blog_migrate/3a862d8dcb90cfd44f9ab9a74fef8a7c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/acc4896591e291af5a8f709e5b9303d1.png)
2)v-model【组件通信方式一种】
v-model它是Vue框架中的指令,它主要结合表单元素一起使用(文本框、复选、单选等等)
它主要作用是收集表单数据
v-model实现原理:value与input事件实现的,而且还需要注意可以通过v-model实现父子组件数据通信
![](https://i-blog.csdnimg.cn/blog_migrate/b884195e93ad66b2d3179a956041741f.png)
3)属性修饰符sync【组件通信方式一种】
可以实现父子组件数据同步。
:money.sync,代表父组件给子组件传递props【money】 给当前子组件绑定一个自定义事件(update:money)
![](https://i-blog.csdnimg.cn/blog_migrate/775bf89f2e060801c88ff411fbe550bc.png)
4)$listeners与$attrs(组件通信方式一种)
它们两者都是组件实例的属性。可以获取到父组件给子组件传递props与自定义事件。
![](https://i-blog.csdnimg.cn/blog_migrate/1c65b145f15f9830da53ce20008f7df2.png)
5)$children与$parent
ref可以获取到某一个组件,子组件
$children组件实例的属性,可以获取到当前组件的全部子组件【数组】((但不能采用数组下标,因为可能乱序))
$parent组件实例的属性,可以获取到当前子组件的父组件,进而可以操作父组件的数据与方法
![](https://i-blog.csdnimg.cn/blog_migrate/0a65e822fe3c2e1af32432f734385186.png)
6)混入mixin
如果项目当中出现很多结构类似功能,想到组件复用。
如果项目当中很多的组件JS业务逻辑相似,想到minxin。【可以把多个组件JS部分重复、相似地方】
![](https://i-blog.csdnimg.cn/blog_migrate/23fde637e5eb15c5daeb9d84de3c28da.png)
![](https://i-blog.csdnimg.cn/blog_migrate/39de5b0028e395ebd10e639cc749079c.png)
7)作用域 插槽
插槽:可以实现父子组件通信(通信的结构)
默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件,子组件是决定不了自身结构与外观。
![](https://i-blog.csdnimg.cn/blog_migrate/aa5cdc6bef7cb49352e2e1a87440639d.png)
(忽略)vue-helper提示 书写代码
![](https://i-blog.csdnimg.cn/blog_migrate/cd20a27f6e9749e658eb0096c1aa74f7.png)
报错:cmd运行npm run serve一直停留51%不动
![](https://i-blog.csdnimg.cn/blog_migrate/6039f93d8d4867324a2a327d89c298cf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3d98c1556997880d6e84e598be59800e.png)
解决
由于渲染原因。如出现标签未闭合等问题
路由文件router.js中先把全部注释,一个个路由组件打开,看哪个打开以后会出现这种问题,则是该组件的文件有问题。
![](https://i-blog.csdnimg.cn/blog_migrate/85438fa9bdd4583b62b634128baf530e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7efce18bf7c48f8a83e1041ed7baaa4f.png)
渲染原因,该文件出现数字(报错)。
需要注意:只有一个根div标签,标签有<div>,则要有</div>,否则也会报错
报错Can't resolve '@pages/Communication/Communicaition'
![](https://i-blog.csdnimg.cn/blog_migrate/373e30d342cb3ffe03cf7b53e4b60974.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0cba79931b34f27b385aa404284c99d9.png)