vue3部分新功能

vue3- $attrs 和 片段

前提： vue3在组件中支持多个根元素

假设： 父组件中引用子组件时传递的非prop或者emit属性为自由属性(style就属于此刻定义的自由属性)

1. 当子组件只有一个根元素时， 自由属性在子组件中都可以通过$attrs获取
2. 当子组件中有多个根组件时， 自由属性无法准确的传递给子组件中对应的根节点，此时，子组件中可以在需要的根节点上添加v-bind="$attrs"来引导父组件中的属性去到子组件的相应根节点中

举例：

// 父组件 son为子组件
<template>
  <son my-freedom="自由属性"></son>
</template>

// son组件-单个根节点
<template>
  <div></div> 
       ↓
  <div  myFreedom="自由属性"></div>
</template>
// son组件-多个根节点
<template>
  <div></div>
  
  <div v-bind="$attrs"></div>
  				↓
  <div  myFreedom="自由属性"></div>
</template>

//vue3中attrs的使用
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.myFreedom)

vue3- Teleport

通过 to 指定代码渲染位置， to的值可以是“#a，.a或是有语义的标签”

使用场景： 是创建一个包含全屏模式的组件。在大多数情况下，你希望模态框的逻辑存在于组件中，但是模态框的快速定位就很难通过 CSS 来解决

 <teleport to="body">
   <div class="modal"></div>
 </teleport>