vue3 setup中defineEmits与defineProps的使用案例

目录

一、defineEmits的使用

二、 defineProps的使用

总结

---

一、defineEmits的使用

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

const emits = defineEmits(['foldChange'])

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

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

 emits('foldChange', isFold.value)

1.子组件定义：

2.父组件接收使用：

二、 defineProps的使用

使用说明
1、在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据
2、在子组件中通过defineProps API来进行接受
3、通过子组件事件修改变量值，同时将值传递给父组件，对父组件的变量进行赋值
4、向子组件传递非props的属性，用法及效果如下
 

1.1  子组件定义 方式一

1.2  子组件定义 方式二

2、父组件使用 

---

总结

好记性不如烂笔头，放了国庆八天假回来，看着代码好陌生...