vue3 ts setup 父子传值

在Vue 3中使用TypeScript进行父子组件之间的传值，可以通过props和emit来实现。

首先，在父组件中，通过props定义要传递给子组件的属性。例如，如果要传递一个名为"message"的属性，可以这样写：

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

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent');

    const updateMessage = (newMessage: string) => {
      message.value = newMessage;
    };

    return {
      message,
      updateMessage
    };
  }
});
</script>

在子组件中，通过props接收父组件传递的属性，并使用emit触发自定义事件来通知父组件更新属性。例如，接收名为"message"的属性，并在按钮点击时触发"updateMessage"事件：

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

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

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  emits: ['updateMessage'],
  setup(props, { emit }) {
    const updateParentMessage = () => {
      const newMessage = 'Updated message from child';
      emit('updateMessage', newMessage);
    };

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

在父组件中，我们通过`@updateMessage`监听子组件触发的"updateMessage"事件，并在事件处理函数中更新父组件的属性。

这样，当子组件中的按钮被点击时，会触发"updateMessage"事件，父组件会接收到该事件并更新自己的属性。