vue component动态组件传值

<template>
  <div>
    <!-- 使用动态组件，并通过props传递值 -->
    <component :is="currentComponent" :message="msg"></component>
    <button @click="changeComponent('ComponentA')">切换到ComponentA</button>
    <button @click="changeComponent('ComponentB')">切换到ComponentB</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA', // 初始组件
      msg: 'Hello from parent component!'
    };
  },
  methods: {
    changeComponent(componentName) {
      this.currentComponent = componentName;
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

<!-- ComponentA.vue -->
<template>
  <div>
    <h1>Component A</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

<!-- ComponentB.vue -->
<template>
  <div>
    <h1>Component B</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

解释说明：

1. 动态组件：使用 <component> 标签和 :is 属性来动态加载不同的组件。
2. 传值：通过 props 将父组件的数据传递给子组件。在这个例子中，父组件传递了一个 message 属性给子组件。
3. 切换组件：通过按钮点击事件触发 changeComponent 方法，改变 currentComponent 的值，从而实现组件的切换。
4. 子组件接收数据：在 ComponentA.vue 和 ComponentB.vue 中，通过 props 接收父组件传递的 message 数据并显示。