父组件向子组件传值的要求

父组件向子组件传值有一些要求：

1. 使用 props 属性：在父组件中，通过在子组件上定义 props 属性来传递数据。在子组件中，可以通过 props 属性来接收父组件传递的值。

2. 声明 props：在子组件中，需要声明接收传递值的 props，并指定其类型、默认值等属性。这样可以确保子组件能够正常接收和使用父组件传递的值。

3. 单向数据流：父组件向子组件传递的值是单向的，即父组件可以通过 props 向子组件传递数据，但子组件不能直接修改父组件的值。如果需要修改父组件的数据，可以通过触发事件来通知父组件进行修改。

以下是一个示例，展示了父组件如何向子组件传递值：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :message="messageFromParent" />
  </div>
</template>

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

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

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

在上述示例中，父组件通过在子组件上使用 `:message="messageFromParent"` 的方式向子组件传递了 `messageFromParent` 的值。子组件通过 `props` 属性声明接收 `message` 值，并在模板中将其显示出来。

请注意，父组件传递的值是通过属性绑定 `:` 的方式进行的，而子组件中的 `props` 是以接收的属性名称为键定义的。

这样，父组件就成功地将值传递给了子组件，并在子组件中显示出来。