File tree Expand file tree Collapse file tree 3 files changed +3
-5
lines changed Expand file tree Collapse file tree 3 files changed +3
-5
lines changed Original file line number Diff line number Diff line change 11# Teleport {#teleport}
22
3- <!-- <VueSchoolLink href="https://vueschool.io/lessons/vue-3-teleport" title="Free Vue.js Teleport Lesson"/> -->
4-
53` <Teleport> ` 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
64
75## 基本用法 {#basic-usage}
Original file line number Diff line number Diff line change @@ -138,4 +138,4 @@ export default {
138138
139139在单文件组件和内联字符串模板中,我们都推荐这样做。但是,PascalCase 的标签名在 DOM 内模板中是不可用的,详情参见 [ DOM 内模板解析注意事项] ( /guide/essentials/component-basics#in-dom-template-parsing-caveats ) 。
140140
141- 为了方便,Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 ` MyComponent ` 为名注册的组件,在模板(或由 Vue 渲染的 HTML 元素)中可以通过 ` <MyComponent> ` 或 ` <my-component> ` 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。
141+ 为了方便,Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 ` MyComponent ` 为名注册的组件,在模板 (或由 Vue 渲染的 HTML 元素) 中可以通过 ` <MyComponent> ` 或 ` <my-component> ` 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。
Original file line number Diff line number Diff line change @@ -242,9 +242,9 @@ data() {
242242
243243两种常见的情况可能导致这种用法:
244244
245- - 过滤列表中的项目(例如,` v-for="user in users" v-if="user.isActive" ` )。在这种情况下,可以用一个新的计算属性来替换 ` users ` ,该属性返回过滤后的列表(例如 ` activeUsers ` )。
245+ - 过滤列表中的项目 (例如,` v-for="user in users" v-if="user.isActive" ` )。在这种情况下,可以用一个新的计算属性来替换 ` users ` ,该属性返回过滤后的列表 (例如 ` activeUsers ` )。
246246
247- - 避免渲染应该隐藏的列表(例如 ` v-for="user in users" v-if="shouldShowUsers" ` )。在这种情况下,将 ` v-if ` 移至容器元素(如 ` ul ` , ` ol ` )。
247+ - 避免渲染应该隐藏的列表 (例如 ` v-for="user in users" v-if="shouldShowUsers" ` )。在这种情况下,将 ` v-if ` 移至容器元素 (如 ` ul ` 、 ` ol ` )。
248248:::
249249
250250## 通过 key 管理状态 {#maintaining-state-with-key}
You can’t perform that action at this time.
0 commit comments