Vue自定义事件方法一般用到组件传值里面

1.在VUE中，对HTML的原生事件做了支持，例如  click , focus,change,blur 等事件。但是除了这些还可以自定义事件 

2. 什么是自定义事件，1 事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理。分为（添加事件，触发事件） 细分就是三步（1.声明需要添加的事件。2.设置触发事件需要执行的代码（行为）。　　3.触发你添加的事件。）

3.Vue 如何添加自定义事件。

4. 添加事件 // callback 可接收$emit传递过来的参数 $on(eventName，callbcak)         

    触发事件 // $emit(eventName, 传递给事件callback的数据)

    移除事件//  $off(eventName, callback)

 

5. 自定义事件的用途   子组件向父组件传递数据

     父组件

<template>
<div>
{{ msg }}
<Child @changeMsg="change"></Child>
</div>
</template>

<script>
import Child from './Child.vue'
export default {
data() {
return {
msg: ''
}
},
components: {
Child
},
methods:{
change(val){
this.msg = val;
}
}
}
</script>

 

子组件

<template>
<div>
<button @click="trigger()">change</button>
</div>
</template>
<script>
export default {
methods: {
trigger(){
this.$emit('changeMsg', '126513')
}
}
}
</script>

 

上面例子中，父组件导入了子组件，并在子组件的根标签上注册了监听事件changeMsg。若changeMsg被触发，则调用父组件里的change()方法。子组件则通过this.$emit('changeMsg', '126513')来触发changeMsg。

这里需要注意一点：父组件注册监听事件时一定要添加给子组件的根标签（也就是这里的<Child>）。否则，子组件无法找到changeMsg事件。