vue3 component标签的使用及如何传递参数

在Vue 3中，`<component>`标签用于动态渲染组件。它允许你在运行时根据数据的变化加载不同的组件实例。以下是`<component>`标签的基本使用方法：

<template>
  <div>
    <button @click="switchComponent">切换组件</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA', // 默认显示的第一个组件名
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'; // 切换当前组件
    },
  },
};
</script>

在这个例子中，当你点击按钮时，`switchComponent`方法会改变`currentComponent`的数据，从而动态地渲染`ComponentA`或`ComponentB`。

至于传递参数给组件，你可以通过`props`属性来实现。例如，假设我们有一个父组件`ParentComponent`，需要向子组件`ChildComponent`传递一些数据：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello, child!',
    };
  },
};
</script>

在子组件`ChildComponent.vue`中接收并处理这个参数：

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: String, // 定义接收到的prop类型
});
</script>

现在，`parentMessage`的值会作为`message` prop传递给`ChildComponent`并在其中展示出来。