vue全家桶进阶之路40：Vue3父件传值给子件

在Vue3中，可以通过props将父组件的数据传递给子组件。具体步骤如下：

在父组件中定义要传递给子组件的数据，可以是data属性中的数据或者是计算属性computed中的数据。
在子组件中通过props属性声明接收父组件传递的数据。
在子组件中使用接收到的数据。

下面是一个示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :child-message="message" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello, World!');

    return {
      message
    };
  }
};
</script>

子组件代码：

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: {
    childMessage: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const childMessage = props.childMessage;

    return {
      childMessage
    };
  }
};
</script>

在父组件中，我们通过 props 将 message 变量传递给子组件 ChildComponent，子组件中定义了一个 childMessage props 来接收这个数据。

在子组件中，我们通过 defineProps() 函数来定义 childMessage props，同时在 setup() 函数中使用 props 参数来获取父组件传递过来的数据，并将其赋值给 childMessage 变量。

在子组件的模板中，我们就可以直接使用 childMessage 变量来渲染数据了。