vue进阶——动态引入组件

在Vue中，可以使用component标签并结合v-if指令来动态地引入组件。以下是一个简单的例子：

<template>
  <div>
    <!-- 动态组件 -->
    <component :is="currentComponent" v-if="currentComponent"></component>
    <!-- 按钮用于切换组件 -->
    <button @click="switchComponent('component-a')">显示组件A</button>
    <button @click="switchComponent('component-b')">显示组件B</button>
  </div>
</template>
 
<script>
// 假设有两个组件ComponentA和ComponentB
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
 
export default {
  data() {
    return {
      // 当前要显示的组件
      currentComponent: null
    };
  },
  methods: {
    switchComponent(componentName) {
      // 根据传入的组件名，切换显示的组件
      this.currentComponent = componentName;
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在这个例子中，我们定义了两个按钮，每个按钮点击时会调用switchComponent方法来切换currentComponent数据属性的值。currentComponent数据属性与component标签的is属性绑定，从而实现了动态组件的引入。当currentComponent为null或未定义时，component标签内部的内容不会显示。