vue父组件调用子组件值

在Vue中，父组件可以通过props属性将数据传递给子组件，然后子组件可以通过props接收父组件传递过来的值。这样子组件就可以在自己的模板中使用这些值。

下面是一个示例，展示了父组件如何调用子组件的值：

<template>
 <div>
 <p>父组件的值：{{ parentValue }}</p>
 <child-component :child-value="parentValue"></child-component>
 </div>
</template>

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

export default {
 components: {
 ChildComponent },
 data() {
 return {
 parentValue: '父组件的值'
 };
 }
};
</script>

<template>
 <div>
 <p>子组件的值：{{ childValue }}</p>
 </div>
</template>

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

在上面的示例中，父组件通过props属性将`parentValue`的值传递给子组件，并且在子组件中使用`childValue`来接收这个值。然后子组件就可以在自己的模板中使用`childValue`来展示父组件传递过来的值。

注意：父组件通过`:`语法来绑定props属性，即`:child-value="parentValue"`。这样子组件才能正确接收父组件传递过来的值。