vue3 component标签如何传递参数

在 Vue3 中，`<component>` 标签用于动态渲染组件，并且可以用来传递参数。要传递参数给组件，你需要在 `<component>` 的 `props` 属性中定义接收的属性名及其类型。例如：

<template>
  <div>
    <component :is="selectedComponent" :prop1="value1" :prop2="value2">
      <!-- 组件内容 -->
    </component>
  </div>
</template>

<script setup>
import MyFirstComponent from './MyFirstComponent.vue';
import MySecondComponent from './MySecondComponent.vue';

const selectedComponent = 'my-first-component'; // 或者从数据或路由等动态获取
const value1 = 'Hello'; // 需要传递给组件的值
const value2 = 42; // 另一个属性

// 如果需要动态选择组件，可以这样操作
const components = {
  my-first-component: MyFirstComponent,
  my-second-component: MySecondComponent,
};

const ComponentToRender = components[selectedComponent];

// 使用动态组件并传参
</script>

在这个例子中，`selectedComponent` 是组件的选择标识符，而 `value1` 和 `value2` 是通过 `v-bind` 指令传递给组件的 props。当你更换 `selectedComponent` 的值时，Vue 会自动创建并渲染对应的组件，并将相应的参数一起传递过去。