Vue 动态组件

使用 'is' 属性，动态组件可以用于在页面中翻转页面，就像浏览器中的选项卡一样。

---

组件标记和 is 属性

为了制作动态组件，我们使用 <component> 标记来表示活动组件。'is' 属性通过 v-bind 绑定到一个值，我们将该值更改为要激活的组件的名称。

实例

在本例中，我们有一个 <component> 标记，它充当 comp-one 组件或 comp-two 组件的占位符。'is' 属性在 <component> 标记上设置，并监听将 'comp-one' 或 'comp-two' 作为值的计算值 'activeComp'。我们有一个按钮，可以在 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>

运行下面的实例。当你切换回某个组件时，你会注意到你在该组件中所做的更改没有了。这是因为该组件被卸载并重新装载，从而重新加载该组件。

实例

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

实例

组件现在记住用户输入。

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>