动态组件

<KeepAlive>

运行下面的示例。 您会注意到，当您切换回某个组件时，您在一个组件中所做的更改会被忘记。 这是因为组件被卸载并再次安装，从而重新加载该组件。

示例

此示例与前面的示例相同，只是组件不同。 在 comp-one 中，您可以在"Apple"和"Cake"之间进行选择，在 comp-two 中，您可以编写一条消息。 当您返回组件时，您的输入将会消失。

为了保持状态、您之前的输入，当返回组件时，我们在 <component> 标签周围使用 <KeepAlive> 标签。

示例

The components now remember the user inputs.

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>