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>