vue3 父组件接受子组件参数

在 Vue3 中，父组件可以向子组件传递参数，通常通过 props（属性）机制实现。父组件可以在模板中定义 prop 并将其值绑定到子组件的某个属性上，这样子组件就能接收并使用这些数据。

例如，在父组件的模板中：

<template>
  <child-component :propName="parentValue" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '这是父组件传给子组件的值'
    }
  }
}
</script>

在这个例子中，`parentValue` 是父组件的数据，`:propName="parentValue"` 就是将父组件的 `parentValue` 作为 prop 传递给子组件 `ChildComponent`，子组件可以通过 `props.propName` 访问这个值。

子组件 `ChildComponent.vue` 的部分代码可能会像这样接收和使用 prop：

<template>
  <div>{{ propName }}</div>
</template>

<script>
export default {
  props: {
    propName: String // 需要在子组件的 script 标签中声明 prop 类型
  }
}
</script>