组件的自定义事件
1.1使用场景：
子组件（传数据） ===> 父组件（接数据）
2.1 基本使用
在父组件中绑定 parent.vue
//方式一 通过v-on绑定，hhh是自定义事件名，test接收回调
<Demo @hhh="test"/>
<Demo v-on:hhh="test"/>
//方式二 通过ref绑定，hhh是自定义事件名，test接收回调
<Demo ref="xxx"/>
mounted(){
this.$refs.xxx.$on('hhh',this.test)
}
--------------------------------------------
methods:{
test (val) {} //通过val接收数据
}
在子组件中触发 children.vue
mounted(){
this.$emit('hhh',data) //data是传递过去的数据
}
3.1 其他语法
3.1.1 解绑事件
children.vue
mounted(){
this.$off('hhh')
}
3.1.2 原生事件
parent.vue
//只触发一次 once
<Demo @hhh.once="test"/>
//绑定原生事件 native (Vue在绑定自定义事件中，默认事件名都是自定义，若想使用原生的需要加native)
<Demo @hhh.native="click"/>
4.1 注意事项
通过this.on('hhh',callback)绑定自定义事件时,callback一般情况下放在methods，通过this去调用，假如你想直接写回调函数，需要注意this指向问题（this默认指向传递过来组件实例对象，而我们需要当前组件的实例对象）
错误做法
parent.vue
this.$refs.name.$on('hhh',function (val) {
console.log(this) //这里this指向传递过来的组价实例对象，而不是我们想要的父组件的this
})
正确做法
//方式一（推荐）写到methods中，通过this去调用
this.$refs.name.$on('hhh',this.test)
methods:{
test (val) {} //通过val接收数据
}
//方式二 （少用，一般会忘了this指向问题，导致一时半会解决找不到问题所在）使用箭头函数
this.$refs.name.$on('hhh',(val)=> {
console.log(this) //箭头函数没有this,此时指向父组件实例对象
})
如果觉得有帮助欢迎点赞、评论。 上述内容仅仅代表个人观点，如有错误，请指正。如果你也对前端感兴趣，欢迎访问我的个人博客sundestiny.github.io/myblog/
