vue3 中父传子defineProps

vue3 中父组件向子组件传递数据可以使用 `defineProps`。`defineProps` 是一个函数，用于定义子组件的 props。在子组件中使用 `defineProps` 定义的 props，可以接收父组件传递过来的数据。

例如，父组件中定义了一个名为 `message` 的 prop：

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

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

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

在子组件中使用 `defineProps` 定义接收 `message` 的 prop：

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

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props) {
    // 使用 props.message
    console.log(props.message);

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

通过 `props.message` 可以在子组件中访问到父组件传递过来的数据。