router-view v-slot 举例

<think>好的，我现在需要回答用户关于Vue.js内置组件和指令的问题。用户希望我列举并简述每个的作用。首先，我需要回忆Vue.js的官方文档，确保信息的准确性。 首先，内置组件方面，我记得有<component>用于动态组件，<keep-alive>缓存组件状态，<transition>和<transition-group>处理动画，还有<slot>用于内容分发。可能还有<teleport>，不过不确定是不是Vue 3新增的。需要确认版本差异，但用户没有指定版本，可能默认最新。 然后是内置指令。常见的如v-bind、v-model、v-for、v-if、v-show、v-on、v-text、v-html、v-cloak、v-pre、v-once。还有自定义指令，但用户要的是内置的。需要确保每个指令的作用描述正确，比如v-if和v-show的区别，v-for的用法，以及v-model的双向绑定。 接下来需要检查是否有遗漏的组件或指令。比如，Vue Router的<router-view>和<router-link>是否算内置？根据引用中的内容，用户提到Vue.js提供内置组件如transition和router-view，但可能router-view属于Vue Router而非Vue核心库。这里需要区分清楚，用户的问题是关于Vue.js本身的内置组件，所以应该不包括Vue Router或Vuex的部分。因此，可能引用中的例子有误，但根据引用[1]，确实提到router-view是内置组件，这可能用户混淆了核心库和官方库。需要核实。 根据Vue官方文档，内置组件包括component、transition、transition-group、keep-alive、slot、teleport（Vue 3）。而router-view和router-link属于Vue Router的组件，不是Vue核心内置的。但用户提供的引用[1]提到router-view是内置组件，可能用户参考的资料有误，或者问题希望包含常用官方库的组件。这里需要处理这个矛盾。 可能的解决方法是：在回答中明确区分Vue核心内置组件和官方库（如Vue Router、Vuex）提供的组件。但用户明确要求“Vue.js内置”，所以应只包含核心库的组件。因此，回答中应列出Vue.js核心内置的组件，如component、keep-alive、transition等，而router-view属于Vue Router，不在其中。但根据引用[1]，用户可能认为router-view是内置的，所以需要注明来源，指出引用中的信息可能有误，或者说明常见的内置组件。 此外，用户提供的引用[2]中提到了v-show和v-if，引用[3]关于组件化开发。因此，需要确保指令列表全面，并正确描述每个指令的作用。 最后，生成相关问题，需要围绕Vue.js的组件和指令，比如比较不同指令、组件使用场景、原理等。</think>### Vue.js 内置组件与指令及作用 #### 一、内置组件 1. **`<component>`** - **作用**：动态组件，通过 `is` 属性动态切换不同的组件。例如：根据条件渲染不同组件内容[^1][^3]。 - 示例： ```html <component :is="currentComponent"></component> ``` 2. **`<keep-alive>`** - **作用**：缓存非活动组件实例，避免重复渲染。常用于保留组件状态（如表单输入）或提高性能[^1]。 - 示例： ```html <keep-alive> <component :is="currentComponent"></component> </keep-alive> ``` 3. **`<transition>` 与 `<transition-group>`** - **作用**： - `<transition>`：为单个元素/组件添加过渡动画（如淡入淡出）。 - `<transition-group>`：为列表元素（如 `v-for` 渲染的项）提供动画支持。 - 示例： ```html <transition name="fade"> <div v-if="show">内容</div> </transition> ``` 4. **`<slot>`** - **作用**：实现组件的内容分发，允许父组件向子组件插入自定义内容。 - 示例： ```html <!-- 子组件 --> <div><slot name="header"></slot></div> ``` 5. **`<teleport>`（Vue 3 新增）** - **作用**：将组件内容渲染到指定 DOM 节点外，常用于模态框、弹窗等脱离当前层级的场景。 - 示例： ```html <teleport to="body"> <div class="modal">弹窗内容</div> </teleport> ``` --- #### 二、内置指令 1. **`v-bind`（缩写 `:`）** - **作用**：动态绑定属性或传递 props。例如：绑定 `class`、`style` 或组件 props[^2]。 - 示例： ```html <div :class="{ active: isActive }"></div> ``` 2. **`v-model`** - **作用**：实现表单元素与数据的双向绑定（如输入框、复选框）[^2]。 - 示例： ```html <input v-model="message" /> ``` 3. **`v-for`** - **作用**：循环渲染列表，需配合 `key` 属性提升性能。 - 示例： ```html <div v-for="item in list" :key="item.id">{{ item.text }}</div> ``` 4. **`v-if` / `v-else-if` / `v-else`** - **作用**：条件渲染元素，若条件为假则销毁 DOM 元素（与 `v-show` 不同）。 - 示例： ```html <div v-if="score >= 90">优秀</div> ``` 5. **`v-show`** - **作用**：通过切换 CSS 的 `display` 属性控制元素显示/隐藏，元素始终保留在 DOM 中[^2]。 - 示例： ```html <div v-show="isVisible">内容</div> ``` 6. **`v-on`（缩写 `@`）** - **作用**：绑定事件监听器，如点击、键盘事件[^2]。 - 示例： ```html <button @click="handleClick">提交</button> ``` 7. **`v-text` 与 `v-html`** - **作用**： - `v-text`：更新元素的 `textContent`。 - `v-html`：更新元素的 `innerHTML`（需注意 XSS 风险）。 - 示例： ```html <div v-text="rawText"></div> <div v-html="rawHTML"></div> ``` 8. **`v-cloak`** - **作用**：防止未编译的模板闪现（需配合 CSS 隐藏未编译内容）。 - 示例： ```html <div v-cloak>{{ message }}</div> ``` 9. **`v-pre`** - **作用**：跳过该元素及其子元素的编译，直接输出原始内容。 - 示例： ```html <div v-pre>{{ 此处不会被编译 }}</div> ``` 10. **`v-once`** - **作用**：元素或组件只渲染一次，后续数据变化不再更新。 - 示例： ```html <div v-once>{{ staticContent }}</div> ``` --- #### 三、注意事项 - **`<router-view>` 与 `<router-link>`** 是 Vue Router 提供的组件，**不属于 Vue.js 核心内置组件**[^1]。 - 自定义指令可通过 `Vue.directive()` 注册，但需与内置指令区分。 ---