I am looking to develop a component that encompasses a textarea element. The goal is to incorporate customized functionality and styling without isolating it in its own scope - instead, I want the parent to be able to bind to regular events like input.
An example of what I need, but currently does not work (issue highlighted in parent.vue):
area.vue:
<template>
<textarea rows="1"></textarea>
</template>
<script>
export default {
mounted() {
// do something...
}
}
</script>
<style scoped>
textarea {
height: 100%;
}
</style>
parent.vue:
<template>
<area @input="doSomething"></area>
</template>
<script>
import Area from "./area.vue"
export default {
methods: {
doSomething(){
// NOT TRIGGERED!
// `input` event is not passed over to parent scope
}
},
components: {
Area
}
}
</script>
I prefer not to manually insert this.$emit calls in the component.