emits Option -- 新增 · Vue&&TypeSprict--基础总结

>[success] # emits Option ~~~ 1.emits 触发当前实例上的事件。附加参数都会传给监听器回调，最常见的用处子传父 2.'Vue 3'现在提供了一个emits选项，类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件, 这种使用是新增方法，之前的写法依然可以在vue3.x中使用 ~~~ >[info] ## vue2.x 和 3.x 都通用的写法 * 子组件 ~~~ <button @click="$emit('accepted',{ email: 'foo@bar.com', password: 123 })">ss</button> ~~~ * 父组件 ~~~ <template> <div> <my-button ref='mybutton' @accepted='accepted'></my-button> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { accepted() { console.log(1, 2, 3) } } } </script> ~~~ >[info] ## vue3.x 新增写法 ~~~ 1.父组件调用触发的地方用法没变，新增的用法是在子组件多了一'emits'属性 ~~~ >[danger] ##### 3.0写法 ~~~ 1.和prop写法类型，都支持定义（数组的形式）和验证（对象的形式）两种，如果你是用的是对象验证的形式方法返回必须要有boolean 返回值，参数是你传入的值，下面案例为例说明参数test打印的参数 ' {email: "foo@bar.com", password: 123}' 2.如果你没参数验证可以将value 定义为null 举个例子 $emit('accepted') 没有传出参数，那么在emits 中定义为emits:{accepted:null} ~~~ ~~~ <template> <div id='outterId' value='outerValue41' class='outerClass'> <button @click="$emit('accepted',{ email: 'foo@bar.com', password: 123 // Type error! })">ss</button> </div> </template> <script> export default { // emits: ['accepted'] emits: { accepted: (test) => { console.log(test) // {email: "foo@bar.com", password: 123} return true } } } </script> ~~~ >[info] ## 我应该按照新的写法还是以前 ~~~ 1.官网给的建议强烈建议您使用记录每个组件发出的所有事件'emits'。这一点特别重要，因为去除了'.native'修饰剂。 'emits'现在，未使用声明的事件的所有侦听器都将包含在组件的中'$attrs'，默认情况下，该侦听器将绑定到组件的根节点 2.下面案例如果emit的是原生的事件（如，click）,就会存在两次触发。一次来自于$emit的触发；一次来自于根元素原生事件监听器的触发，解决方使用3.x新增的声明emits 方式，注意下面的案例是注释掉的如果不想被触发两次需要配置'emits',注意这里指的是原生事件 3.如果父组件哪里不是原生事件不加' emits: ['click']' 只会触发一次 <button @click="$emit('click1',{ email: 'foo@bar.com', password: 123 // Type error! })">ss</button> <my-button ref='mybutton' @click1='accepted'></my-button> ~~~ * 子组件 ~~~ <template> <button @click="$emit('click',{ email: 'foo@bar.com', password: 123 // Type error! })">ss</button> </template> <script> export default { // emits: ['click'] // emits: { // accepted: (test) => { // console.log(test) // return true // } // } } </script> ~~~ * 父组件 ~~~ <template> <div> <my-button ref='mybutton' @click='accepted'></my-button> </div> </template> <script> import myButton from '../components/MyButton' export default { name: 'testlison', components: { myButton }, methods: { accepted() { console.log(1, 2, 3) } } } </script> <style scoped lang="less"></style> ~~~