Vue3+TS+Vite父子组件之间如何通信？

组件之间的传值大家都很熟悉了。很多同学说到VUE3+TS无从下手，所以分享这篇文章，希望大家看完之后能提一下VUE3+TS。平时使用的函数如：ref、reactive、watch、computed等需要先导入才能使用，但是本文介绍的defineProps、withDefaults、defineEmits、defineExpose都是开箱即用的函数无需介绍。父子传值：父组件中defineProps给子组件传值时，通过v-bind绑定一个数据，然后子组件使用defineProps接收数据。可以传递的数据有两种类型：字符串类型和非字符串类型。字符串类型不需要v-bind，非字符串类型需要使用v-bind，可以简写为冒号（:）。/*父组件代码*/在子组件接收时使用defineProps，需要注意的是我们使用TS的时候需要加上类型限制，如果不是TS，可以直接使用。TS语法用法：defineProps<{title:string;data:number[]}>()非TS语法用法：defineProps({title:{default:"",type:string},list:Array})对应上面父组件的值，子组件代码接收使用TS语法是：默认值：withDefaults在非TS语法中，default可以设置默认值。TS语法中如何设置默认值？withDefaults是一个不需要开箱即用的函数。它可以接收两个参数。第一个参数用于defineProps接收参数，第二个参数是一个对象，用于设置默认值。用法一：分离模式typeProps={title?:string;list?:number[]}withDefaults(defineProps(),{title:"DefaultValue",list:()=>[1,2]})用法二：组合模式widthDefault(defineProps<{title?:string,list?:number[]}>(),{title:"DefaultValue",list:()=>[1,2]})在上面的子组件中添加默认值代码如下：将父组件传入的值删除后，默认值发现设置的显示。子组件传值给父组件：当defineEmits子组件传值给父组件时，会调度事件触发父组件中的事件并接收值。给子组件绑定一个@click事件，然后通过defineEmits注册自定义事件。当点击@click事件时，会触发emit调用注册的事件，然后传递参数。非TS声明语法//clickname父组件自定义事件名称letemit=defineEmits(['clickname'])constpostV=()=>{emit('clickname','passedvalueorvariable')}TS声明语法//clickname父组件自定义事件名称letemit=defineEmits<{(e:'clickname',str:string):void}>()constpostV=(str:string):void=>{emit('clickname',str)}如果有多个自定义事件，则这样写：typePerson={name:stringage:number}letemit=defineEmits<{(e:'clickname',str:string):void(e:'getData',per:Person):void}>()constpostV=(str:string):void=>{emit('clickname',str)}constpostVData=(per:Person):void=>{emit('getData',per)}我们使用defineEmits在子组件中添加调度事件：字符串')">子数据到父数据在父组件中使用自定义事件接收子组件传过来的数据：defineExpose子组件给父组件传值时，除了使用defineEmits，还可以使用defineExpose。它暴露了组件本身的属性。父组件先获取子组件，然后Get属性值defineExpose接收一个对象参数，其中包含要传递的属性。defineExpose({name,count,....})定义并暴露子组件中需要传递的属性：在父组件中使用ref获取子组件，然后打印属性：