Vue - 包装HTML5元素

Question

我想创建一个包装textarea元素的组件.它的功能是添加自定义功能和自定义样式,但我不希望它在自己的范围内 - 相反,父级应该能够绑定到常规事件input.

需要什么,但不起作用的示例(问题突出显示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>

我不想显式写入this.$emit组件的调用.

Answer 1

你只需要添加.native到@input.

Vue的v-on/ @,当在组件上使用时(没有.native),只监听由声明的自定义事件emit.