v-on to bind dom event in a custom component #2942
Description
In Vue 2.0 if we need to offer some common dom event features, we have to write each of them in custom components itself.
for example
main.vue:
<template>
<btn @click="go">Click Me!</btn>
</template>
<script>
module.exports = {
components: {
btn: require('btn.vue')
}
methods: {
go: function (e) {
// todo: go to a certain url
}
}
}
</script>btn.vue:
<template>
<button @click="click" @mouseenter="mouseenter" @mouseleave="mouseleave" ...><slot></slot></button>
</template>
<script>
module.exports = {
methods: {
click: function (e) {this.$emit('click', e)},
...
}
}
</script>But I think that's not necessary.