vue 动态组件component

当我们编写 Vue 项目时，经常会遇到需要动态加载组件的情况。<component> 元素就可以用来实现这一功能，因此我们称之为 Vue 动态组件。下面将介绍 Vue 动态组件的定义和使用方法。

什么是 Vue 动态组件

Vue 动态组件是一个特殊的组件，它可以动态决定要渲染哪个组件，这个过程可以在运行时完成。Vue 在对该元素进行编译时，会动态根据数据来判断需要加载哪个子组件。

在 <component> 的 is 属性中可以传入一个字符串或者组件选项对象，这个属性类型将决定用来渲染的组件类型，可以是已经注册的组件或者局部的组件，也可以是注册数据或计算属性返回的组件类型。

除了 is 属性外，Vue 动态组件还有其他常用的属性：

• keep-alive：在动态组件内部添加缓存功能，可以避免频繁创建和销毁组件。
• transition：为动态组件添加过渡动画，可以使组件加载更加平滑。

如何使用 Vue 动态组件

我们可以通过以下两种方式使用 Vue 动态组件。

动态绑定组件类型

最常见的方式是通过绑定组件类型到一个动态变量，在运行时使用这个变量来决定加载哪个组件。下面是一个简单的示例：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        components: [Comp1, Comp2, Comp3],
        currentComponent: 'Comp1'
      }
    },

    methods: {
      changeComponent() {
        const index = Math.floor(Math.random() * this.components.length)
        this.currentComponent = this.components[index]
      }
    }
  }
</script>

在这个示例中，我们将 :is 属性与 currentComponent 数据进行绑定。当我们点击按钮时，currentComponent 数据将会随机赋值为 Comp1、Comp2 和 Comp3 中的一种，这样就能通过点击按钮来动态切换组件了。

使用 v-if 指令动态加载组件

除了动态绑定组件类型，Vue 动态组件还可以使用 v-if 指令来动态加载组件：

<template>
  <div>
    <template v-if="showComp1">
      <Comp1 />
    </template>
    <template v-if="showComp2">
      <Comp2 />
    </template>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showComp1: true,
        showComp2: false
      }
    },

    methods: {
      changeComponent() {
        this.showComp1 = !this.showComp1
        this.showComp2 = !this.showComp2
      }
    }
  }
</script>

在这个示例中，我们使用了两个不同的 v-if 指令来表示是否展示组件。初始状态下，Comp1 组件会被展示。当我们点击按钮时，showComp1 数据将会被取反，Comp1 组件会被隐藏，showComp2 数据也会被进行取反，从而将 Comp2 组件展示出来。

示例

下面提供两个更加详细的示例，以便更好地理解 Vue 动态组件的使用方法。

示例一：动态加载多种类型的组件

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
  import Comp1 from './components/Comp1.vue'
  import Comp2 from './components/Comp2.vue'
  import Comp3 from './components/Comp3.vue'

  export default {
    data() {
      return {
        components: [Comp1, Comp2, Comp3],
        currentComponent: Comp1
      }
    },

    methods: {
      changeComponent() {
        const index = Math.floor(Math.random() * this.components.length)
        this.currentComponent = this.components[index]
      }
    }
  }
</script>

在这个示例中，我们通过 import 关键字引入了 Comp1、Comp2 和 Comp3 组件，并将它们分别保存在 components 数组中。然后，我们通过绑定 currentComponent 来控制当前展示的组件类型。最后，我们通过点击按钮，随机切换 currentComponent，从而实现了多种类型组件的动态加载。

示例二：同时使用 transition 和 keep-alive 属性

<template>
  <div>
    <transition mode="out-in" appear>
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </transition>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
  import Comp1 from './components/Comp1.vue'
  import Comp2 from './components/Comp2.vue'
  import Comp3 from './components/Comp3.vue'

  export default {
    data() {
      return {
        components: [Comp1, Comp2, Comp3],
        currentComponent: Comp1
      }
    },

    methods: {
      changeComponent() {
        const index = Math.floor(Math.random() * this.components.length)
        this.currentComponent = this.components[index]
      }
    }
  }
</script>

在这个示例中，我们同样引入了 Comp1、Comp2 和 Comp3 组件，并将它们分别保存在 components 数组中。然后，我们使用 <transition> 元素来控制组件的过渡动画，并在元素内部使用了 <keep-alive> 元素来实现组件的缓存功能。最后，我们通过绑定和点击事件来随机切换当前组件类型。