Vue-wrap HTML5 element

Question

I want to create a component that wraps an element textarea. Its function is to add custom functions and a custom style, but I don't want it to be covered in its area - rather, the parent should be able to communicate with regular events such as input.

An example of what is needed but will not work (problem 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 do not want to explicitly write to this.$emitcalls to the component.

Answer 1

You need to add .nativein @input.

Vue v-on/@, ( .native), , emit.

Answer 2

, ..

<area :do-something="doSomething"></area>

# template
<textarea rows="1" @input="doSomething"></textarea>

# script
export default {
  props: ['doSomething'],
  ...

Answer 3

Unfortunately, you cannot do this, but you can deceive and approach.

mounted() {
    var self = this;
    Object.keys(Event.prototype).forEach(function(ev) {
       self.$refs.text.addEventListener(ev.toLowerCase(), function(d) {
           self.$emit(ev.toLowerCase(), d);
           console.log("emitting", ev, d);
       })
   })
}

With this you get access to mousedown, mouseup, mouseover, mouseout, mousemove, mousedrag, click, dblclick, keydown, keyup, keypress, dragdrop, focus, blur, selectand change. Then in the parent template ...

<my-textarea @keyup="update()" @change="somethingElse()"></my-textarea>

Here's the fiddle https://jsfiddle.net/rdjjpc7a/371/