Vue3 父组件给子组件传值用props咋实现

在Vue3中，父组件通过`props`向子组件传递值非常直观。假设父组件想将一个名为`message`的字符串传递给子组件，可以在父组件的模板中这样操作：

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

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: '这是父组件传递给子组件的初始消息',
    };
  },
};
</script>

在上述代码中，`:message`是一个 prop 属性的简写形式，它告诉 Vue 要将 `parentMessage` 的值作为 prop 传递给 `ChildComponent`。

然后，在子组件的`ChildComponent.vue`文件中接收这个值：

<!-- 子组件 ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    // 定义接收到的 prop 名称为 message
    message: String, // 类型可以是任何有效的 JavaScript 数据类型
  },
};
</script>

当父组件的`parentMessage`发生变化时，子组件中的`message`属性会相应地更新。