vue3中父与子组件传值

在 Vue3 中，父组件可以通过 props 将数据传递给子组件。子组件可以通过使用 setup 函数来接收父组件传过来的值，通过 props 参数来使用这些值。

以下是示例代码：

父组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const message = ref('Hello from parent component!');
    return {
      message,
    };
  },
};
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

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

在上面的示例中，父组件通过使用 props 将 message 数据传递给了子组件，子组件则在 props 中定义了一个名为 message 的属性来接收这个值，并将它渲染到模板中。