vue3新功能-Teleport

1.teleport  在组件内的任何位置渲染内容

将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

例:将组件dialog添加到body下面

<teleport to="body">   <el- dialog -->    </teleport> 

2.fragments  多个根元素外层不需要包裹

<fragment>    

<div>11</div>

<div>22</div>

</fragment>

3.render 函数渲染组件视图；

通过函数实现以上模板语法

render() {
    return h('div', [
      h('button', { on: { click: this.toggleText } }, 'Toggle Text'),
      h('div', { style: { display: this.showText ? 'block' : 'none' } }, this.text)
    ]);
  }

4. 自定义指令

例子： 聚焦

<template>
  <div>
    <input v-auto-focus />
  </div>
</template>

directives: {
    autoFocus: {
      mounted(el) {
        el.focus();
      }
    }
  }

5. suspense 异步组件加载等待过程中，优先显示一些其他的内容

<template>
  <div>
    <Suspense>
      <template #default> 
//<template #default>这层包裹可去掉
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

6. Provide/Inject 父子孙...通信

//父
import { provide } from 'vue';
provide('tosunFunc', tosunData);

//子孙
import { inject } from 'vue';
const tosunData = inject('tosunFunc')