详解如何实现Vue组件的动态绑定

<template>
  <div>
    <button @click="showComponent = 'A'">显示组件A</button>
    <button @click="showComponent = 'B'">显示组件B</button>

    <component-a v-if="showComponent === 'A'"></component-a>
    <component-b v-if="showComponent === 'B'"></component-b>
  </div>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      showComponent: '' // 可以设置为 ''，'A' 或 'B'
    };
  }
};
</script>

<template>
  <div>
    <select v-model="componentName">
      <option value="ComponentA">组件A</option>
      <option value="ComponentB">组件B</option>
    </select>

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

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

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  data() {
    return {
      componentName: 'ComponentA' // 默认组件
    };
  }
};
</script>

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">组件A</button>
    <button @click="currentComponent = 'ComponentB'">组件B</button>

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

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

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  data() {
    return {
      currentComponent: 'ComponentA' // 默认组件
    };
  }
};
</script>