Vue动态组件的使用方法

什么是动态组件?

Vue 的动态组件（Dynamic Components），也称为动态渲染组件，即根据某个条件（如用户点击事件、异步数据返回等）决定渲染哪个组件。Vue 提供了专门的组件 <component> 来实现动态组件的渲染。

如何实现动态组件

第一步: 将组件作为数据进行声明

import MyButton from '@/components/MyButton.vue'
export default {
  data(){
    return {
      6s1: MyButton, //将组件作为一个数据
    }
  }
}

第二步: 在模板中使用组件时，用 <component> 组件

<component :is="6s1"></component>