vue学习 --- 第八天 插槽Slot/非父子通信

目录：

1、认识插槽Slot作用

2、插槽Slot基本使用

3、具名插槽Slot使用

4、作用域插槽Slot使用

5、全局事件总线使用

6、依赖注入Provide/Inject

一、认识插槽Slot作用

props传递的具体的值，slot传递的是某个标签。

二、插槽Slot基本使用

三、具名插槽Slot使用

 

当你设置了多个插槽，并且在父组件了的子组件里面加了许多标签，那每一个slot都会有父组件了的子组件里面加了许多标签

四、作用域插槽Slot使用

 渲染作用域就是父组件和子组件各自的数据都是从各自组建的data里面拿的，不可能出现从子组件的模板语法{{ xxx }}中拿到父组件里面的data值。这种情况只能依靠作用域插槽来解决。做法就和使用props一样，只是从父组件接收值的方式得是 v-slot：插槽的name=类似props传过去的变量名称。

 

 作用域插槽只有vue有，react没有

五、全局事件总线使用

事件传递。vue2时候用实例也可以做到事件总线功能，但是vue3里面删除了。

 

两种导出方式分别对应两种导入方式。 

 

六、依赖注入Provide/Inject  （不常用）

这个方法也是options api之一，注意它使用的范围不大，不能随便用。

 

 

依赖注入Provide/Inject的响应式数据不能是对象类型（对象里面是没有this指向的，没有作用域，会向上找作用域来确定this的上下文），所以得改变成方法的形式才能拿到data里面的变量。

怎么让provide里面的数据变成动态的？

先从vue里面引入computed，要用在provide函数里面，为什么computed里面的是用箭头函数？

因为this的作用域要使用provide里面的this，否则找不到变量。这里强调一下this怎么判断。