defineProps 子传父 vue3的写法

在Vue 3中，可以使用`defineProps`来定义子组件的props。下面是一个示例代码：

父组件：

<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>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateParentMessage">Update parent message</button>
  </div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
  },
  emits: ['update:message'],
  methods: {
    updateParentMessage() {
      this.$emit('update:message', 'Hello from child');
    },
  },
});
</script>

在子组件中，我们使用`props`选项来定义`message`属性，并使用`emits`选项来定义`update:message`事件。在子组件中，我们可以使用`this.$emit`来触发`update:message`事件，并将新的消息作为参数传递给父组件。