vue3动态组件使用详解

1. 什么是动态组件

Vue 3 中的动态组件是一种非常方便的技巧，可以根据需要动态选择并呈现组件。实现动态组件可以通过标签的 is 特性来实现。例如，假设我们有这样一个父组件：

<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>

在上面的组件中，我们使用子组件中的 is 属性，以动态的方式选择呈现给用户的组件，而 currentComponent 可以是一个计算属性，它根据业务逻辑来动态返回组件的名称。

1. 自定义组件

Vue 3 的组件是非常强大的工具，当然也包括动态组件。我们可以为自定义组件创建相应的动态组件。比如有以下组件：

<template>
  <h4>{{ title }}</h4>
</template>

<script>
  export default {
    props: {
      title: String
    }
  }
</script>

我们可以为这个组件创建一个动态组件，例如：

<component :is="currentComponent" :title="title"></component>

currentComponent 可以动态地引用我们自定义的组件：

data() {
  return {
    currentComponent: 'MyComponent',
    title: '这是一个标题'
  }
},

components: {
  MyComponent: () => import('./MyComponent.vue')
}

在上面的代码中，我们动态设置了 currentComponent，以动态使用并渲染组件。

示例1

比如我们有一个父组件，父组件可以动态选择呈现 HelloWorld 组件和 WorldHello 组件，示例代码如下：

<template>
  <div>
    <select v-model="currentComponent">
      <option value="HelloWorld">HelloWorld</option>
      <option value="WorldHello">WorldHello</option>
    </select>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  import WorldHello from './components/WorldHello.vue'

  export default {
    components: {
      HelloWorld,
      WorldHello
    },

    data() {
      return {
        currentComponent: 'HelloWorld'
      }
    }
  }
</script>

在这个例子中，我们首先通过一个 select 列表来选择需要呈现的子组件，然后使用动态组件来呈现。在这个例子中，我们将 HelloWorld 组件和 WorldHello 组件作为一个组件数组传递给父组件，然后使用 is 属性动态地呈现这两个组件中的一个。

示例2

我们可以通过 $options 给组件动态设置 props。示例代码如下：

<template>
  <div>
    <button @click="switchComponent">Switch</button>
    <component :is="currentComponent" :message="message"></component>
  </div>
</template>

<script>
  import ComponentA from '../components/ComponentA.vue'
  import ComponentB from '../components/ComponentB.vue'

  export default {
    components: {
      ComponentA,
      ComponentB
    },

    data() {
      return {
        currentComponent: 'ComponentA',
        message: 'Hello World!'
      }
    },

    methods: {
      switchComponent() {
        if (this.currentComponent === 'ComponentA') {
          this.currentComponent = 'ComponentB'
          this.$options.components.ComponentB.props = {
            message: {
              type: String,
              default: 'Hello World!'
            }
          }
        } else {
          this.currentComponent = 'ComponentA'
          this.$options.components.ComponentA.props = {
            message: {
              type: String,
              default: 'Hello World!'
            }
          }
        }
      }
    }
  }
</script>

在这个例子中，我们有两个组件：ComponentA 和 ComponentB，它们都有一个名为 message 的 prop。我们可以使用当前所选组件的 props 来动态更改 message。当用户点击“切换”按钮时，位于 is 属性中的当前组件被切换，它的 props 也会切换。如果当前组件是 ComponentA，则它的 props 将更改为：

this.$options.components.ComponentA.props = {
  message: {
    type: String,
    default: 'Hello World!'
  }
}

同样，如果当前组件是 ComponentB，则它的 props 将更改为：

this.$options.components.ComponentB.props = {
  message: {
    type: String,
    default: 'Hello World!'
  }
}