相关推荐recommended
vue3 defineEmits的使用
作者:mmseoamin日期:2023-12-02

vue3 defineEmits的使用

以下代码和内容的使用都是在vue3的setup中,未使用TS。

1、计数器案例

父组件:


子组件:


页面渲染效果

vue3 defineEmits的使用,在这里插入图片描述,第1张

2、案例说明

1、在父组件中定义一个变量

2、在子组件中定义+1和-1方法,以及一个变量

3、通过子组件事件修改变量值,同时将值传递给父组件,对父组件的变量进行赋值

3、defineEmits API 使用说明

1、在子组件中调用defineEmits并定义要发射给父组件的方法

const emits = defineEmits(['add1', 'decre1'])

2、使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收

3、在子组件要触发的方法中,调用emits并传入发射给父组件的方法以及参数

 emits('add1', num.value)