我想创建一个包装 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
调用中显式写入组件。
最佳答案
你只需要加上 .native
至 @input
.
Vue 的 v-on
/@
, 当在组件上使用时(没有 .native
),只监听由 emit
声明的自定义事件.
关于javascript - Vue - 包装 HTML5 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40773694/