1.teleport 在组件内的任何位置渲染内容
将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
例:将组件dialog添加到body下面
<teleport to="body"> <el- dialog --> </teleport>
2.fragments 多个根元素外层不需要包裹
<fragment>
<div>11</div>
<div>22</div>
</fragment>
3.render 函数渲染组件视图;
通过函数实现以上模板语法
import {h} from 'vue'
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')