Vue3语法糖+ts组件传值_0

时间：2023-03-27 15:21:42 JavaScript

开发中常用的一些功能，逻辑大致相同。像这样的东西可以密封到一个组件中。比较常用的有函数封装、组件封装，组件封装需要引入到页面上才能使用，所以一般都有自己的一些方法。父子组件可以通过一些值关联起来。这个方法就是我们所说的组件传值。Vue3+ts的组件传值其实就是组件传值加上数据类型约束，没有区别。这里主要介绍vue3的setup语法糖组件传值。以删除功能为例，父子组件主要使用defineProps和defineEmits实现组件传值。父子传递这里通过importcustomcomponentnamefromsubcomponentpath引入组件，页面上可以使用作为父组件//父组件将子组件导入到父组件中通过自定义名称子组件子组件A

childpass父子组件子组件A

parentcomponent//父组件引入子组件，通过@child组件的自定义名称关联子组件，valChange为自定义函数，当子组件触发时返回deleteOutcome事件，valChange函数将自动调用多值的组件传值上面演示了父子组件的单传值，多传值也是如此，只需向组件添加自定义名称或自定义事件其实父组件的传值只需要定义好值，接收到触发子组件返回的事件即可。剩下的不用做，更多的在子组件中完成。子组件需要接收父组件的值和返回。传递子组件的值，如下所示：从儿子传给父亲@deleteOutcome="valChange"//从孩子传递给父母*///子组件事件接口IBackStatus{backStatus:string}constvalChange=(val:IBackStatus)=>{console.log(val);//获取子组件的值userStatus.value=val.backStatus//改变父组件的值}//子组件事件2interfaceIBoreB{moreB:number}constmoreB=(val:IBoreB)=>{console.log（瓦尔）；//子组件的值moreA.value=val.moreB//改变父组件的值}子组件//接收父组件的值ValueconstfatherElement=defineProps({//接收传过来的值father这里是父组件的自定义名称father:{type:String,//数据类型default:"Novaluepassed"//没有传值时的默认值},moreA:{type:Number,//data类型默认值："Novaluepassed"//没有传值时的默认值}})//返回子组件的值constemit=defineEmits(['deleteOutcome','moreB'])constbackStatus=ref('back')constdeleteGoods=()=>{emit('deleteOutcome',{backStatus:backStatus.value})//returnemit('moreB',{moreB:200})//return}}需要注意localparent传递给child的数据是单向绑定和同步的。当父组件的值改变时，子组件的值也会同时改变。子组件不能更改父组件传递的值，因为它是只读的。子组件不能直接操作父组件的值，只能从子组件传递给父组件，触发子组件给父组件的自定义事件，在这个事件中改变父组件的值。子组件返回后，会自动触发父组件收到的自定义事件。在ts中，需要注意返回数据时的数据类型。如果父子组件的数据类型不一致，就会报错。兄弟组件传值请看另一篇文章：vue3语法糖设置兄弟组件传值案例源码：https://gitee.com/wang_fan_w/ts-seminar如果觉得本文对您有帮助，请点个赞它明星