vue3+TS+setup语法糖实现传值：父传子、子传父、组件间传值

在Vue 3和TypeScript中，可以使用props和emit来实现组件间的通信。以下是使用setup函数和Composition API的示例代码：

父组件传值给子组件：

// ParentComponent.vue
<template>
  <ChildComponent :parentData="parentData" />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('父组件数据');
</script>

子组件接收父组件的值并进行处理：

// ChildComponent.vue
<template>
  <div>{{ parentData }}</div>
</template>
 
<script setup lang="ts">
defineProps({
  parentData: String
});
</script>

子组件传值给父组件：

// ChildComponent.vue
<template>
  <button @click="sendToParent">发送给父组件</button>
</template>
 
<script setup lang="ts">
import { defineEmits } from 'vue';
 
const emit = defineEmits(['updateData']);
 
const sendToParent = () => {
  emit('updateData', '子组件数据');
};
</script>

父组件监听子组件发出的事件并处理数据：

// ParentComponent.vue
<template>
  <ChildComponent @updateData="handleDataFromChild" />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const handleDataFromChild = (data: string) => {
  console.log(data);
};
</script>

组件间传值：

// SiblingComponentA.vue
<template>
  <SiblingComponentB :dataFromA="dataFromA" />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import SiblingComponentB from './SiblingComponentB.vue';
 
const dataFromA = ref('数据从A到B');
</script>

// SiblingComponentB.vue
<template>
  <div>{{ dataFromA }}</div>
</template>
 
<script setup lang="ts">
import { defineProps } from 'vue';
 
defineProps({
  dataFromA: String
});
</script>

以上代码展示了在Vue 3和TypeScript中如何使用setup函数和Composition API进行组件间通信的基本方法。