如何在vue3中将父组件传递过来的值，赋予子组件的变量

在 Vue 3 中，为了将父组件传给子组件的值绑定到子组件的变量上，通常使用 props（属性）机制。这是单向数据流的核心原则之一。以下是如何操作的简单步骤：

1. **在父组件中定义 prop**：
父组件需要先定义一个 prop，指定要传递的数据类型以及一些可选的描述。例如，假设你要传递一个字符串：

   <template>
     <ChildComponent :message="parentMessage"/>
   </template>

   <script>
   import ChildComponent from './ChildComponent.vue';
   export default {
     components: { ChildComponent },
     data() {
       return {
         parentMessage: 'Hello from Parent'
       };
     }
   }
   </script>

使用 `:` 分割标签名和 prop 名，`:message` 表示你想要传递名为 `message` 的值。

2. **在子组件接收并使用 prop**：
子组件（ChildComponent.vue）需要通过 props 接收这个值，并在模板里使用它：

   <template>
     <div>{{ message }}</div> <!-- message 就是从父组件传递过来的值 -->
   </template>

   <script>
   export default {
     props: { // 在这里声明接收到的 prop
       message: {
         type: String, // 数据类型
         required: true, // 是否必填，默认为 false
       }
     }
   }
   </script>

这样，每当父组件的 `parentMessage` 变化时，子组件内的 `message` 也会相应地更新。注意，父子组件之间的数据流动是单向的，从父到子。