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')
)
)
