插槽

在这里插入图片描述

默认、具名（多个插槽）、作用域（接收子组件数据）

//具名
<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div><BaseLayout><template v-slot:header><h1>页面标题</h1></template><template v-slot:default><p>主要内容</p></template><template v-slot:footer><p>页脚内容</p></template>
</BaseLayout>

在这里插入图片描述

内容分发、组件复用、组件封装

Teleport&Fragment

在这里插入图片描述

v-clock与v-pre

• v-cloak 是“先藏后显”，为了更好的用户体验。

•v-pre 是“不看不办”，为了特殊展示或性能优化。

在这里插入图片描述

在页面加载初期，Vue 实例尚未完成编译和挂载时，浏览器会短暂地将模板中的原始 Mustache 标签（如 {{ message }}）显示出来。等 Vue 实例准备就绪后，这些原始标签才会被替换为真实数据。在 Vue 实例编译完成之前，该元素会匹配 CSS 规则，从而被隐藏。当 Vue 实例编译完成后，它会自动移除所有元素上的 v-cloak属性。属性被移除后，CSS 隐藏规则就不再生效，元素也就正常显示出来。

在这里插入图片描述