Vue3+TypeScript父子组件传值

在Vue 3和TypeScript中，父子组件传值可以通过props和emit进行。以下是一个简单的示例：

父组件 (ParentComponent.vue):

<template>
  <div>
    <child-component :parentData="parentData" @childEvent="handleChildEvent" />
  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('Hello from parent');
 
const handleChildEvent = (value: string) => {
  console.log(`Received: ${value}`);
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    <p>{{ parentData }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>
 
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps<{
  parentData: string;
}>();
 
const emit = defineEmits(['childEvent']);
 
const sendToParent = () => {
  emit('childEvent', 'Data from child');
};
</script>

在这个例子中，父组件通过props向子组件传递数据，并监听一个自定义事件childEvent。子组件通过点击按钮触发一个事件，并发送数据给父组件。这里使用了Vue 3的<script setup>语法，并且类型安全地使用了TypeScript。