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 变量来渲染数据了。

vue全家桶进阶之路40：Vue3父件传值给子件的相关教程结束。