Vue3+TS Day12 - 非父子组件的通信、事件总线mitt、插槽slot(重点)

一、非父子组件的通信（感觉没啥用，后面用到再回顾吧，以后估计都用vuex）

1、非父子组件的通信主要有两种？

image.png

2、认识Provide 和 Inject

image.png

3、认识Provide 和 Inject基本使用

image.png

image.png

4、一些细节？

image.png

5、事件总线库mitt的使用？

image.png

image.png

image.png

二、插槽Slot（重点）

1、通过【props】已经可以向子组件传递参数了，为什么还要【插槽slot】？

• 【props】可以决定子组件展示的内容
• 【slot】可以决定子组件用什么元素展示
• 插槽的使用过程其实是 抽取共性、预留不同
  
  image.png

image.png

2、插槽的基本使用？

image.png

image.png

3、具名插槽是为了处理什么情况而出现的？怎么使用？

image.png

image.png

image.png

4、更加灵活的插槽【动态名插槽】

image.png

5、什么是渲染作用域？

• 【父级模板】里的所有内容都是在父级作用域中编译的；
• 【子级模板】里的所有内容都是在子级作用域中编译的；

image.png

5、如果父组件想在插槽内访问子组件的数据，要怎么办？

• 使用作用域插槽

image.png

image.png

7、一些细节补充（了解即可）

image.png

image.png