vue3如何在组件接收父级的值

在Vue 3中，组件接收父级传递的值通常是通过使用`props`来实现的。`props`是父组件传递给子组件的数据的自定义属性。子组件通过声明`props`来接收父组件传递过来的数据。下面是一个简单的例子：

1. 首先，在子组件中定义需要接收的`props`：

// 子组件ChildComponent.vue
export default {
  props: {
    parentValue: String
  }
}

在这个例子中，`parentValue`是子组件将要接收的`prop`的名称，`String`是这个`prop`期望的数据类型。当然，`props`可以指定为任何类型，甚至可以是对象或数组。

2. 然后，在父组件中将数据传递给子组件：

<!-- 父组件ParentComponent.vue -->
<template>
  <ChildComponent :parent-value="dataFromParent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: '这是从父组件传递的数据'
    }
  }
}
</script>

在这个例子中，父组件通过绑定`dataFromParent`变量到子组件的`:parent-value`属性（注意，使用`v-bind:`或简写为`:`来动态绑定属性），将数据传递给子组件。子组件通过定义的`props`接收到了这个值。

注意，在Vue 3中，还有一种新的方式来声明`props`，使用`defineProps`宏函数，这可以在`<script setup>`语法糖中使用：

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  parentValue: String
});
</script>

这种方式使得`props`的定义更加简洁，特别是在使用`<script setup>`语法时。