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

Answer 2

您可以将方法从父项传递给子项作为道具，即

<强>父

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

儿童

# template <textarea rows="1" @input="doSomething"></textarea> # script export default { props: ['doSomething'], ...

Answer 3

不幸的是你不能这样做，但你可以作弊并且非常接近。

uint8_t

通过此操作，您可以访问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); }) }) }，mousedown，mouseup，mouseover，mouseout，mousemove，mousedrag ，click，dblclick，keydown，keyup，keypress，dragdrop，focus，blur和{ {1}}事件。然后在你的父模板中......

select

这是小提琴https://jsfiddle.net/rdjjpc7a/371/

Vue - 包装HTML5元素

`area.vue:`

`parent.vue:`

3 个答案: