vue3 父页面向子页面传值

在 Vue 3 中，可以通过 props 属性向子组件传递数据。具体实现步骤如下：

1. 在父组件中定义一个变量，并将其作为 props 传递给子组件，例如：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, child component!',
    };
  },
};
</script>

在上述代码中，我们定义了一个名为 `message` 的变量，并将其作为 props 传递给子组件 `ChildComponent`。

2. 在子组件中通过 props 属性接收父组件传递的数据，例如：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

在上述代码中，我们通过 `props` 属性定义了一个名为 `message` 的属性，并指定了该属性的类型为 `String`，并且设置了 `required` 为 `true`，表示该属性是必须的。

3. 现在，我们就可以在子组件中使用 `message` 属性了。

通过上述步骤，在 Vue 3 中就可以实现父组件向子组件传递数据了。