菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue 的原因、方法和设置 Vue 的第一个 SFC 页面 Vue 组件 Vue Props Vue v-for 组件 Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue 本地组件 Vue Slots Vue v-slot Vue Scoped Slots Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue Template Refs Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue v-for 动画 Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

动态组件

动态组件 可以用来在你的页面中切换页面,就像你的浏览器中的标签页一样,通过使用 'is' 属性。

组件标签和 'is' 属性

要创建一个动态组件,我们使用 <component> 标签来表示活动组件。 'is' 属性通过 v-bind 绑定到一个值,我们改变这个值来表示我们想要激活的组件的名称。

示例

在这个例子中,我们有一个 <component> 标签,它充当 comp-one 组件或 comp-two 组件的占位符。 'is' 属性设置在 <component> 标签上,并监听计算值 'activeComp',该值保持 'comp-one' 或 'comp-two' 作为值。我们还有一个按钮,它在 'true' 和 'false' 之间切换一个数据属性,以便计算值在活动组件之间切换。

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">
    Switch component
  </button>
  <component :is="activeComp"></component>
</template>

<script>
  export default {
    data() {
      return {
        toggleValue: true
      }
    },
    computed: {
      activeComp() {
        if(this.toggleValue) {
          return 'comp-one'
        }
        else {
          return 'comp-two'
        }
      }
    }
  }
</script>
运行示例 »

<KeepAlive>

运行下面的示例。你会注意到,当您切换回一个组件时,您在该组件中所做的更改会被遗忘。这是因为组件被卸载并重新挂载,重新加载组件。

示例

这个示例与之前的示例相同,只是组件不同。在 comp-one 中,你可以选择 'Apple' 或 'Cake',在 comp-two 中,你可以写一条消息。当你返回一个组件时,你的输入会消失。

运行示例 »

要保留状态(即您之前的输入),当我们返回到组件时,我们使用 <KeepAlive> 标签包裹 <component> 标签。

示例

现在组件可以记住用户输入了。

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">
    Switch component
  </button>
  <KeepAlive>
    <component :is="activeComp"></component>
  </KeepAlive>
</template>
运行示例 »

'include' 和 'exclude' 属性

默认情况下,<KeepAlive> 标签内的所有组件都将被保留。

但是,我们也可以通过在 <KeepAlive> 标签上使用 'include' 或 'exclude' 属性来定义只保留某些组件。

如果我们对 <KeepAlive> 标签使用 'include' 或 'exclude' 属性,我们也需要使用 'name' 选项为组件命名。

CompOne.vue:

<script>
  export default {
    name: 'CompOne',
    data() {
      return {
        imgSrc: 'img_question.svg'
      }
    }
  }
</script>

示例

使用 <KeepAlive include="CompOne">,只有 'CompOne' 组件会记住它的状态(之前的输入)。

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">
    Switch component
  </button>
  <KeepAlive include="CompOne">
    <component :is="activeComp"></component>
  </KeepAlive>
</template>
运行示例 »

我们也可以使用 'exclude' 来选择保留哪些组件,哪些不保留。

示例

使用 <KeepAlive exclude="CompOne">,只有 'CompTwo' 组件会记住它的状态。

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">
    Switch component
  </button>
  <KeepAlive exclude="CompOne">
    <component :is="activeComp"></component>
  </KeepAlive>
</template>
运行示例 »

'include' 和 'exclude' 都可以通过逗号分隔来使用多个组件。

为了展示这一点,我们将添加另一个组件,总共三个组件。

示例

使用 <KeepAlive include="CompOne, CompThree">,'CompOne' 和 'CompThree' 组件都会记住它们的状态。

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <button @click="compNbr++">
    Next component
  </button>
  <KeepAlive include="CompOne,CompThree">
    <component :is="activeComp"></component>
  </KeepAlive>
</template>
运行示例 »

'max' 属性

我们可以使用 'max' 作为 <KeepAlive> 标签的属性,来限制浏览器需要记住状态的组件数量。

示例

使用 <KeepAlive :max="2">,浏览器只会记住用户访问过的最后两个组件的输入。

App.vue:

<template>
  <h1>Dynamic Components</h1>
  <label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-one'"> One</label>
  <label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-two'"> Two</label>
  <label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-three'"> Three</label>
  <KeepAlive :max="2">
    <component :is="activeComp"></component>
  </KeepAlive>
</template>
运行示例 »

Vue 练习

通过练习来测试自己

练习

创建动态组件时使用哪个属性?

<component :="activeComp"></component>

开始练习



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持