我一直在工作VueJS只是1个星期前的一个项目。
我创建了两个组件:*科目.vue(父项)
<!--It's just a little part of the code-->
<e-textarea
title="Informations complémentaires"
@input="otherInformation" <!--otherInformation is a string variable which contains the text value-->
:value="otherInformation"></e-textarea>
*文本区域.vue(子组件)
<template>
<div class="form-group">
<label for="e-textarea">{{ title }}</label>
<textarea
id="e-textarea"
class="form-control"
row="3"
:value="value"
v-on="listeners"
>
</textarea>
</div>
</template>
<script>
import { FormGroupInput } from "@/components/NowUiKit";
export default {
name: "e-textarea",
components: {
[FormGroupInput.name]: FormGroupInput
},
props: {
title: String,
value: String
},
computed: {
listeners() {
return {
...this.$listeners,
input: this.updateValue
};
}
},
methods: {
updateValue(value) {
this.$emit("input", value);
}
},
mounted() {
console.log(this.components);
}
};
</script>
<style src="@/assets/styles/css/input.css" />
当我从我的Account.vue在TextArea自定义组件中写入内容时,我的文本值没有更新,侦听器函数没有传递。我是否需要其他内容?
3条答案
按热度按时间yyyllmsg1#
您可以通过v-model轻松完成此操作:
它等于:
ie3xauqp2#
绑定自定义
textarea
和input
事件中的值:CustomTextarea.vue
并与
v-model
一起使用:More explanation here
amrnrhlw3#
希望它能为某些人节省一些时间。在Vueidojs 3中,他们改变了这一点,与Vueidojs 2相比,我得到了它的工作:
onInput方法如下所示:
当然,您必须在“e-textarea”组件上使用prop“modelValue”,而不是像vue 2中那样使用value。我还在此modelValue上添加了一个监视器,以防它无法更新:
是的,您可以这样使用组件:
当然,如果您愿意或需要,您也可以侦听输入事件
你也可以在这里和这里找到更多关于这个变化的信息