vue切换组件的显示以及父页面和组件的通讯

在Vue.js中，切换组件的显示通常使用v-if、v-else-if、v-else或者v-show指令来实现。v-if 只适合固定值，如果要动态切换就不能做到

<template>
  <div>
    <!-- 使用 v-if 和 v-else 来根据条件切换组件 -->
    <ComponentA v-if="condition"></ComponentA>
    <ComponentB v-else></ComponentB>
    
    <!-- 点击按钮切换条件 -->
    <button @click="condition = !condition">切换组件</button>
  </div>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      condition: true // 初始条件，根据这个条件显示不同的组件
    };
  }
};
</script>

需要动态切换这个时候，可以使用动态组件 <component> 和 is 特性来实现组件的动态切换。

<template>
  <div>
    <!-- 使用动态组件来切换组件 -->
    <component :is="currentComponent"></component>
    
    <!-- 点击按钮切换组件 -->
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
  </div>
</template>

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

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

注意，动态切换，必须同步引入组件，不能异步引入，异步的话就会找不到组件

import ComponentA from './select-product.vue';

和const selectProduct = defineAsyncComponent(() => import('./select-product.vue'))的区别