javascript - Vue - 包装 HTML5 元素

Question

我想创建一个包装 textarea 元素的组件。它的功能是添加自定义功能和自定义样式，但我不希望它被限制在自己的范围内——相反，父级应该能够绑定(bind)到常规事件，如 input。

需要但无法工作的示例(问题在 parent.vue 中突出显示):

区域.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 声明的自定义事件.