vue3动态组件传递参数

在Vue3中，动态组件传递参数通常通过`v-bind`指令，即`:props`来实现。当你需要在父组件中控制子组件的行为或状态时，你可以将数据作为属性传递给子组件。这可以按照以下步骤操作：

1. 定义父组件中的组件模板：

<template>
  <component :is="currentComponent" :props="componentProps" />
</template>

在这里，`currentComponent`是一个绑定的数据项，用于切换显示的不同子组件；`componentProps`也是一个对象，包含你需要传入子组件的各种属性。

2. 父组件的script部分：

<script setup>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

const currentComponent = 'childA'; // 初始组件选择
const componentProps = {
  prop1: 'value1', // 这些是你要传递给子组件的属性
  prop2: 'value2',
};

function switchComponent(newComponent) {
  currentComponent = newComponent;
}

// 在某个事件触发或条件变化时更新组件和属性
switchComponent('childB'); // 更换为ChildB组件

</script>

3. 子组件接收并处理这些参数：

<!-- 子组件ChildA.vue -->
<template>
  <div>Child A - Props: {{ prop1 }} and {{ prop2 }}</div>
</template>

<script>
export default {
  props: ['prop1', 'prop2'],
};
</script>

<!-- 或者子组件ChildB.vue -->
<template>
  <div>Child B - Props: {{ prop1 }} and {{ prop2 }}</div>
</template>

<script>
export default {
  props: ['prop1', 'prop2'],
};
</script>

当父组件改变`currentComponent`或`componentProps`时，对应的子组件会接收到并使用这些新的属性值。