vue3 scripte中 ts setup 父子传值

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

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

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

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

const message = ref('Hello from parent');

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

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

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

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

const props = defineProps({
  message: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['updateMessage']);

const updateParentMessage = () => {
  const newMessage = 'Updated message from child';
  emit('updateMessage', newMessage);
};
</script>

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

这样，当子组件中的按钮被点击时，会触发"updateMessage"事件，父组件会接收到该事件并更新自己的属性。在Vue 3的`<script setup>`语法中，我们可以使用`defineProps`和`defineEmits`来定义props和emit。