「 VUE3 + TS + Vite 」父子组件间如何通信?
组件之间传值，大家都很熟悉，涉及到 VUE3 +TS 好多同学就无从下手了，所以分享这篇文章，希望看完后提起 VUE3+TS 能够不慌不忙。
平时使用的函数如：ref、reactive、watch、computed 等需要先引入才能使用，但是本篇文章介绍的 defineProps、withDefaults、defineEmits、defineExpose 都是开箱即用的函数，无需引入。
父向子传值：defineProps
在父组件内给子组件传值时，通过 v-bind 绑定一个数据，然后子组件使用 defineProps 接收数据。
可以传递的数据有两种：字符串类型 和 非字符串类型。字符串类型不需要 v-bind，非字符串需要使用 v-bind，可以简写成冒号（:）。
/* 父组件代码 */
<template>
父组件
<child-com title="父组件向子组件传值" :list="list"></child-com>
</template>
<script lang="ts" setup>
import ChildCom from './component/ChildCom.vue'
const list: Array<number> = [1, 2, 3, 4, 5]
</script>子组件接收的时候使用 defineProps，需要注意的是我们使用 TS 需要加类型限制，如果不是 TS 的可以直接使用。
TS 语法使用：
defineProps<{
title: string;
data: number[]
}>()非 TS 语法使用：
defineProps({
title: {
default: "",
type: string
},
list: Array
})对应上边父组件传值，使用 TS 语法接收的子组件代码为：
<template>
子组件
{{ title }}
{{ list }}
</template>
<script lang="ts" setup>
interface DefineProp {
title: string
list: Array<number>
}
defineProps<DefineProp>()
</script>默认值：withDefaults
在非 TS 语法中，default 可以设置默认值，在 TS 语法中，如何设置默认值呢？
withDefaults 是一个无需引入开箱即用的函数，可以接收两个参数，第一个用于defineProps 接收参数，第二个参数是一个对象用于设置默认值。
使用方式1：分离模式
type Props = {
title?: string;
list?: number[]
}
withDefaults(defineProps<Props>(), {
title: "默认值",
list: () => [1, 2]
})使用方式2：组合模式
widthDefault(
defineProps<{ title?: string, list?: number[] }>(),
{
title: "默认值",
list: () => [1, 2]
}
)给上边的子组件添加默认值代码如下：
<template>
子组件
<br />
{{ title }}
<br />
{{ list }}
</template>
<script lang="ts" setup>
interface DefineProp {
title?: string
list?: Array<number>
}
withDefaults(defineProps<DefineProp>(), {
title: '设置title默认值',
list: () => [1, 2],
})
</script>将父组件中传的值删除掉之后，发现设置的默认值就展示出来了。
子向父传值：defineEmits
子组件给父组件进行传值时，都是通过派发事件，去触发父组件中的事件并接收值。
在子组件绑定一个 @click 事件，然后通过 defineEmits 注册自定义事件，当点击 @click 事件时触发 emit 去调用注册事件，然后传递参数。
非 TS 声明语法
// clickname 父组件自定义事件名
let emit = defineEmits([ 'clickname' ])
const postV = () => {
emit('clickname', '传递的值或变量')
}TS 声明语法
// clickname 父组件自定义事件名
let emit = defineEmits<{(e: 'clickname', str: string): void}>()
const postV = (str: string): void => {
emit('clickname', str)
}如果是多个自定义事件，写法如下：
type Person = {
name: string
age: number
}
let emit = defineEmits<{
(e: 'clickname', str: string): void
(e: 'getData', per: Person): void
}>()
const postV = (str: string): void => {
emit('clickname', str)
}
const postVData = (per: Person): void => {
emit('getData', per)
}我们在子组件内，使用 defineEmits 添加派发事件：
<template>
子组件
<button @click="postV">子向父传值</button>
<button @click="postVal('传递字符串')">子向父传data</button>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
// 子向父传值
type Person = {
name: string
age: number
}
const per = reactive<Person>({
name: 'qq',
age: 18,
})
const emit = defineEmits<{
(e: 'clickname', per: Person): void
(e: 'getData', data: string): void
}>()
const postV = (per: Person): void => {
emit('clickname', per)
}
const postVal = (data: string): void => {
emit('getData', data)
}
</script>父组件内使用自定义事件，接收子组件传递来的数据：
<template>
父组件
<child-com
@clickname="getChildVal"
@getData="getChildData"
></child-com>
</template>
<script lang="ts" setup>
iimport ChildCom from './component/ChildCom.vue'
const getChildVal = (per: { name: string; age: number }): void => {
console.log('per：', per)
}
const getChildData = (data: string): void => {
console.log('data', data)
}
</script>defineExpose
子组件向父组件传值时，除了使用 defineEmits 之后，也可以使用 defineExpose ，它是通过把组件自己的属性暴露出去，父组件先获取到子组件，再获取属性值。
defineExpose 接收一个对象参数，包含需要传递的属性。
defineExpose({
name,
count,
....
})在子组件内，定义和暴露需要传递的属性：
<template>
子组件
</template>
<script lang="ts" setup>
const count: number = 1
defineExpose({
count,
})
</script>在父组件内使用 ref 获取到子组件，然后打印属性：
<template>
父组件
<child-com ref="child"></child-com>
<button @click="getProp">获取子组件属性</button>
</template>
<script lang="ts" setup>
import ChildCom from './component/ChildCom.vue'
import { ref } from 'vue'
const child: HTMLElement = ref()
const getProp = (): void => {
console.log(child.value.count)
}
</script>