Vue3+TS Day12 - 非父子组件的通信、事件总线mit
作者:
望穿秋水小作坊 | 来源:发表于
2021-12-06 15:30 被阅读0次
一、非父子组件的通信(感觉没啥用,后面用到再回顾吧,以后估计都用vuex)
1、非父子组件的通信主要有两种?
![](https://img.haomeiwen.com/i13946897/6d753f47023821d7.png)
image.png
2、认识Provide 和 Inject
![](https://img.haomeiwen.com/i13946897/4f510f80407b47c9.png)
image.png
3、认识Provide 和 Inject基本使用
![](https://img.haomeiwen.com/i13946897/39611b5f2be3f379.png)
image.png
![](https://img.haomeiwen.com/i13946897/449627a7720c8b91.png)
image.png
4、一些细节?
![](https://img.haomeiwen.com/i13946897/5ad058feb3d12ad4.png)
image.png
5、事件总线库mitt的使用?
![](https://img.haomeiwen.com/i13946897/6ef32c347a206325.png)
image.png
![](https://img.haomeiwen.com/i13946897/487898f4344bb27e.png)
image.png
![](https://img.haomeiwen.com/i13946897/a23b24e6c82bd4dd.png)
image.png
二、插槽Slot(重点)
1、通过【props】已经可以向子组件传递参数了,为什么还要【插槽slot】?
- 【props】可以决定子组件展示的内容
- 【slot】可以决定子组件用什么元素展示
- 插槽的使用过程其实是
抽取共性、预留不同
image.png
![](https://img.haomeiwen.com/i13946897/58779acf316c48f7.png)
image.png
2、插槽的基本使用?
![](https://img.haomeiwen.com/i13946897/b8221a9a4bf69406.png)
image.png
![](https://img.haomeiwen.com/i13946897/04499af6ae9a7493.png)
image.png
3、具名插槽是为了处理什么情况而出现的?怎么使用?
![](https://img.haomeiwen.com/i13946897/7093f92f140c07e2.png)
image.png
![](https://img.haomeiwen.com/i13946897/4fa27d142346572b.png)
image.png
![](https://img.haomeiwen.com/i13946897/7b2d317e6093ce11.png)
image.png
4、更加灵活的插槽【动态名插槽】
![](https://img.haomeiwen.com/i13946897/03d39fb2bae265c2.png)
image.png
5、什么是渲染作用域?
- 【父级模板】里的所有内容都是在
父级作用域中编译的
;
- 【子级模板】里的所有内容都是在
子级作用域中编译的
;
![](https://img.haomeiwen.com/i13946897/7879a0d2ca426e48.png)
image.png
5、如果父组件想在插槽内访问子组件的数据,要怎么办?
![](https://img.haomeiwen.com/i13946897/c9ee6a09463431b2.png)
image.png
![](https://img.haomeiwen.com/i13946897/9833af7824a4f070.png)
image.png
7、一些细节补充(了解即可)
![](https://img.haomeiwen.com/i13946897/8ad78bc06f713747.png)
image.png
![](https://img.haomeiwen.com/i13946897/1d3d7c293c1a362a.png)
image.png
本文标题:Vue3+TS Day12 - 非父子组件的通信、事件总线mit
本文链接:https://www.haomeiwen.com/subject/oipgxrtx.html
网友评论