ts踩坑!vue3中defineEmits接收父组件向子组件传递方法,以及方法所需传的参数及类型定义!

6 篇文章 0 订阅

使用说明
1、在子组件中调用defineEmits并定义要发射给父组件的方法 const emits= defineEmits([‘foldchange’])
2、使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收
3、在子组件要触发的方法中,调用emits并传入发射给父组件的方法以及参数 emits(‘foldChange’, value)

父组件:

function getCron(cron: string): void {
    formData.value.cron = cron;
}
/
 <cronAdd ref="cronAddRef" @getCron="getCron"></cronAdd>

子组件:
ts-plugin报错信息提示emits就只接受一个参数,即方法名, 第二个参数值就会报错,
在这里插入图片描述

正确写法:
子组件:
定义方法时,同时定义方法所需参数及类型value
在这里插入图片描述

function changeCron(val: string): void {
    emits("getCron", val)
}

defineEmits中多种定义方式:

// defineEmits适用于父组件向子组件传递方法
const emits = defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'confirm'): void;
  (e: 'close'): void;
}>();
const emits = defineEmits([
  'update:visible',
  'closeDialog',
  'openDialog',
  'comfirmBtn'
]);
const emit = defineEmits(['update:modelValue', 'handleClose', 'transformFileUrl']);
const emits = defineEmits(['update-cropper', 'colse-dialog', 'upload-img'])
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值