前端查漏补缺

原创已于 2025-08-22 22:31:20 修改 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-08-22 22:27:10 首次发布

插槽

在这里插入图片描述

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

//具名
<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 隐藏规则就不再生效，元素也就正常显示出来。

在这里插入图片描述