vue中使用component标签传值

在 Vue.js 中，`<component>` 标签是用来动态加载组件的。如果你想通过这个标签向子组件传递数据，你可以使用 `props`（属性）。下面是一个简单的例子：

<template>
  <div>
    <button @click="loadChildComponent">Load Child Component</button>
    <component :is="currentComponent" v-if="currentComponent">
      <!-- 通过 props 传递数据 -->
      <child-component :message="parentMessage"></child-component>
    </v-if>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      currentComponent: 'ChildComponent', // 当前显示的组件名
      parentMessage: 'Hello from parent!', // 父组件要传递给子组件的数据
    };
  },
  methods: {
    loadChildComponent() {
      this.currentComponent = 'ChildComponent'; // 动态切换到 ChildComponent 组件
    }
  }
};
</script>

在这个例子中，`:message` 属性告诉子组件 `ChildComponent` 接收名为 `message` 的 prop。当点击按钮加载子组件时，父组件会将 `parentMessage` 数据传递给子组件。