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'))的區別

 

在Vue.js中，父組件和子組件之間傳遞數據主要有以下幾種方式：
Props（屬性）：父組件通過屬性向子組件傳遞數據。父組件：

<template>
  <ChildComponent :user="userData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      userData: {
        name: '張三',
        age: 30
      }
    };
  }
};
</script>

 

子組件：

<template>
  <div>用戶名：{{ userName }}</div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  computed: {
    userName() {
      return this.user.name;
    }
  }
};
</script>

$emit（自定義事件）：子組件通過觸發事件向父組件發送消息。子組件：

<template>
  <button @click="notifyParent">通知父組件</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('message', '這是一條來自子組件的消息');
    }
  }
};
</script>

父組件：

<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log('父組件接收到的消息：', message);
    }
  }
};
</script>