vue中使用component标签传值给显示的组件

在Vue中，如果你想要从父组件向子组件传递数据，可以使用`v-bind`或简写的`:`语法将属性绑定到`component`标签上。首先，你需要创建一个具有接收属性的自定义组件，并在父组件中声明需要传递的数据。例如：

<!-- 父组件 -->
<template>
  <div>
    <custom-component :data="parentData"></custom-component>
  </div>
</template>

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

export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      parentData: {
        name: 'Parent',
        value: 42
      }
    };
  }
};
</script>

在这个例子中，`custom-component`会接收到名为`data`的对象作为props。然后，在子组件的`<template>`部分，你可以通过` props`来访问并使用这个数据：

<!-- 子组件 CustomComponent.vue -->
<template>
  <div>
    <p>名称：{{ data.name }}</p>
    <p>值：{{ data.value }}</p>
  </div>
</template>

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

这样，当你在父组件改变`parentData`时，子组件的内容也会相应地更新。