vue3父组件给子组件传值，并在子组件接受

1、在父组件中定义数据： 在父组件中定义需要传递给子组件的数据。

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

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

export default defineComponent({
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent!',
    };
  },
});
</script>

2、在子组件中接收props： 在子组件中使用props来接收父组件传递的数据。

方法一：

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

<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
  },
});
</script>

方法二：

在这个修改后的代码中，我们使用了 defineProps 来定义 props，而不是在 defineComponent 中。这是因为在 <script setup> 中，Vue 3 已经隐式地为你创建了一个组件。

<script setup lang="ts">
import { defineProps, PropType } from 'vue';

const props = defineProps({
  message: {
    type: String as PropType<string>,
    required: true,
  },
});
</script>