12.Vue3其他语法补充

组件中如果没有任何内容可以写成单标签

 

layout tree 和 render tree 有啥区别

layout tree 决定了布局，只是当前结构相关的内容, 真正渲染的时候会形成render tree

render tree 会包真实会渲染的数据

腾讯课堂有些页面是react写的 知乎也是react写的

bilibili vue写的

微博是vue写的

(1) 非父子组件通信【provide 和 inject 的基本使用】

provide/inject  可以看成 long range props

provide 依赖提供者

inject 注入使用

 

在实际的开发中用的比较少，学完vuex以后，一般实际使用vuex比较多

是给子孙提供的数据，它本身和兄弟 是不可以使用的，

如果多个组件提供了相同的数据，会覆盖

补充：

1、如果provide中有引用data里面的东西，vue建议吧provide写成一个函数

 2、响应式的提供 provide  数据

使用computed

建议以后使用provide直接写成函数

(2) mitt 全局事件总线

总线这个概念来自于操作系统

vue3从实例中移除了$on , $off , $once 方法，如果想继续实现全局事件总线，要通过第三方库

vue3官方推荐库：mitt / tiny-emitter

mitt 库的使用：

1、npm install mitt

2、封装工具 eventbus.js

import mitt from 'mitt'

const emitter = mitt();
// export const emitter1 = mitt()
// export const emitter2 = mitt()
// export const emitter3 = mitt()

export default emitter;

 

 

 

emitter.on("*",(type,info)=>{}) 监听所有事件

• 参数有两个，第一个是事件类型
• 第二个才是真正传递过来的参数

取消事件监听

1、取消所有监听

emitter.all.clear()

2、取消单个监听

function onFoo(){}

emitter.on('foo',onFoo);//监听

emitter.off('foo',onFoo);//取消监听

什么情况下需要取消监听？

在组件销毁对应的生命周期【destory】里面去取消,因为组件销毁的话，事件也都没有用了，这个时候就可以取消

(3)* 插槽 slot 的基本使用 【slot很重要】

什么时候定义插槽？

• 插槽的使用过程其实是抽取共性，预留不同
• 将共同的元素和内容依然在组件内进行封装
• 将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素

如何使用slot?

• <slot>元素作为承载分发内容的出口
• 在封装的组件中，使用特殊的元素<slot>就可以为封装组件开启一个插槽
• 该插槽插入啥内容取决于父组件如何使用

插槽中间可以插入的内容：普通文本，DOM元素， 组件（自定义组件）

 

 

补充：

1)、插槽 slot 的默认内容

<slot>这里是默认内容</slot>

2)、具名插槽:给插槽起个名字，<slot name = "right"></slot>

 

 

一个不带name的slot， 会带有隐含的名字default

3)、动态插槽名

高级组件，name往往不是写死的，写一个配置传递给这个组件

 

 

 插槽的内容设置样式，一般在父组件设置，因为插槽内容动态

4)、具名插槽缩写  v-slot: 换成 # 

 

(3) 作用域插槽 slot   ***【在封装高级组件时用的挺多】

认识vue的渲染作用域：

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

 

 作用域插槽用法：

 补充：

1)、作用域插槽有名字的情况：

 完整写法:

【如果slot没有名字，默认default , v-slot:default = 'slotProps' 简写为v-slot = 'slotProps'】

 2)、slotProps 这个名字不是写死的，可以自己随便定义