vue3子组件如何使用父组件的值

在 Vue 3 中，子组件可以通过 props 属性来接收父组件传递的值。下面是一个简单的例子来演示如何在子组件中使用父组件的值：

<template>
  <div>
    <p>父组件的值：{{ parentValue }}</p>
  </div>
</template>

<script>
export default {
  props: ['parentValue'], // 声明接收父组件传递的属性
}
</script>

在父组件中，你可以通过使用 v-bind 或简写的 : 来将值传递给子组件的 props 属性：

<template>
  <div>
    <child-component :parentValue="parentData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'Hello from parent component',
    }
  },
}
</script>

在这个例子中，父组件将 `parentData` 的值传递给了子组件的 `parentValue` 属性。子组件可以通过 `this.parentValue` 来访问父组件传递过来的值。

请注意，在 Vue 3 中，props 的声明方式有所变化，你可以使用数组语法或对象语法来声明 props。上述例子使用了数组语法，表示子组件接收一个名为 `parentValue` 的属性。你还可以在声明 props 时指定其类型、默认值等更多选项，具体请参考 Vue 3 的官方文档。