（十三）Vue3.x中的emits选项
1、概述：当前组件的通过emit的事件列表
2、类型：Array|Object
3、作用：Vue3.0中使用emit发起事件时会要求当前组件记录emit事件（没有则控制台会抛出警告）。
4、用途：用于记录当前组件emit的事件，当为对象时，则可以验证传入的值是否有效。
用法一：数组用法
用法二：对象用法，当emits为对象时，可以验证事件中的参数是否有效
注意： emits无论是数组或者对象用法最终都会将事件给传递出去，数组或对象的使用只是为了记录实例中的emit事件，或者是验证事件中的参数。
下一章： （十四）Vue3.x核心之getCurrentInstance
上一章： （十二）Vue3.x中重写的v-model
ps： 明明知道闯一闯可能会拼出一片天地，那为什么还是有大部分的人选择了平凡？
vue3语法糖
Vue3官方提供了 script setup 语法糖
只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。如下：
因为没有了setup函数，那么props，emit，attrs怎么获取呢
setup script语法糖提供了新的API来供我们使用
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
//父组件
template
my-son foo="" @change="childClick" /
/template
script lang="ts" setup
import MySon from "./MySon.vue";
let childClick = (e: any):void = {
console.log(e); //
};
/script
//子组件
template
span @click="sonClick"信息:{{ props.foo }}/span
/template
script lang="ts" setup
import { defineEmits, defineProps} from "vue";
const emit = defineEmits(["change"]); // 声明触发事件 change
const props = defineProps({ foo: String }); // 获取props
console.log(props)
const sonClick = () ={
emit('change' , props.foo)
}
/script
总结
1、语法糖就是setup()简写
2、在语法糖中使用变量可以直接使用
3、组件不需要祖册
4、不能使用非vue3的模块，钩子函数
vue3.2中的defineProps、defineEmits、defineExpose
获取组件传值
子组件向父组件事件传递
子组件暴露自己的属性
父组件获取属性
点赞加关注，永远不迷路
解决：使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps‘ is not defined
Vue 3 的 Script Setup 语法引入了 defineProps、defineEmits、defineExpose、withDefaults 的编译器宏。然而某些情况下，ESLint 会报错以上编译器宏函数未定义。
本文将介绍两种解决方案来解决这个问题（假定你的项目使用 Vue-Cli 进行初始化）。
若版本在 v8.0.0 以上，跳转到 Step 2，否则直接到 Step 3 的内容。
打开 .eslintrc.js 文件并修改如下：
打开 .eslintrc.js 文件并修改如下：
vue3 defineEmits：emit is not a function
前端时间在尝试使用vue3开发新的一套组件，并且使用script-setup这个实验特性
虽然vue3+script-setup使用起来很爽，但是在用到defineEmits时碰到一个问题：
将dinfineEmits复制给变量emits时，不知为何emits是一个null值？！
谷歌、百度了一遍，发现网上几乎没有使用script-setup出现该问题的，最后只得重新创建一个新的项目（构建最新版本的vue、vite等组件依赖），测试了一下，结果就没问题了：
总结：可能是早期创建项目时依赖的组件版本过旧，并且存在一些bug（当时也没有withDefaults这个API），使用新版本解决问题！