vue :is

<template>
  <div>
    <!-- 使用 :is 动态绑定组件 -->
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

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

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

解释说明：

• :is 是 Vue.js 中用于动态切换组件的属性。它允许你通过绑定一个变量来决定渲染哪个组件。
• 在上面的示例中，<component :is="currentComponent"></component> 会根据 currentComponent 的值动态渲染 ComponentA 或 ComponentB。
• toggleComponent 方法用于切换 currentComponent 的值，从而实现组件的动态切换。