在VueJS中动态传递道具给动态组件

<!-- 父组件 -->
<template>
  <div>
    <!-- 动态组件 -->
    <component :is="dynamicComponent" :props-data="propsData"></component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dynamicComponent: '', // 动态组件名称
        propsData: { // 动态传递的属性数据
          name: 'John',
          age: 25
        }
      }
    },
    methods: {
      changeDynamicComponent(componentName) {
        this.dynamicComponent = componentName; // 根据需要切换动态组件
      }
    }
  }
</script>

<!-- 动态组件1 -->
<template>
  <div>
    <h2>动态组件1</h2>
    <p>Name: {{ propsData.name }}</p>
    <p>Age: {{ propsData.age }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      propsData: {
        type: Object,
        required: true
      }
    }
  }
</script>

<!-- 动态组件2 -->
<template>
  <div>
    <h2>动态组件2</h2>
    <p>Name: {{ propsData.name }}</p>
    <p>Age: {{ propsData.age }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      propsData: {
        type: Object,
        required: true
      }
    }
  }
</script>