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事件。