Vue的自定义事件
自定义事件是自定义组件才有的。
自定义事件其实就是封装DOM原生事件,如何封装?——就是在原生事件的回调中发射(emit)一个自定义事件。
下面就是具体操作:
子组件中,选择click或其他原生事件来封装
// 自定义组件boringButton.vue
<template>
<button v-on:click="incrementHandler">{
{ counter }}</button>
</template>
<script>
export default {
name: 'boring-button',
methods: {
incrementHandler: function () {
this.counter += 1;
this.$emit('increment');
}
}
}
</script>
父组件中,使用v-on/@绑定事件监听器
// 引用boringButton.vue的文件
<template>
<!-- 注意increment的大小写和emit的保持一致,要一毛一样才行 -->
<boringButton @increment='incrementTotal'></boringButton>
</template>
<script>
methods: {
incrementTotal: function () {
console.log('I increment the boringButton!');
}
}
</script>