如何对文本区域组件文本值进行数据绑定和更新？

Question

就在1周前，我一直在为一个项目在VueJS上工作。我创建了两个组件： * 帐户.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>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 在文本区域自定义组件中编写某些内容时，我的文本值不会更新，并且我的侦听器函数也不会传递。我需要有别的东西吗？

Answer 1

您可以通过v模型轻松执行此操作：

<textarea

  id="e-textarea"

  class="form-control"

  row="3"

 v-model="value"

>

</textarea>

它等于：

<textarea

  id="e-textarea"

  class="form-control"

  :value="value"

  @input="value = $event.target.value"> </textarea>

Answer 2

绑定自定义和事件中的值：textareainput

CustomTextarea.vue

<template>

  <div class="form-group">

    <label for="e-textarea">{{ title }}</label>

    <textarea

      id="e-textarea"

      class="form-control"

      row="3"

      v-bind:value="value"

      v-on:input="$emit('input', $event.target.value)"

    >

    </textarea>

  </div>

</template>

<script>

import { FormGroupInput } from "@/components/NowUiKit";

export default {

  name: "e-textarea",

  components: {

    [FormGroupInput.name]: FormGroupInput

  },

  model: {

    prop: "textAreaVue"

  },

  props: {

    title: String,

    value: String

  },

  computed: {

    listenerFunction() {

      return {

        ...this.$listener,

        input: this.updateValue

      };

    }

  },

  methods: {

    updateValue(value) {

      console.log("function has been passed");

      this.$emit("input", value);

    }

  },

  mounted() {

    console.log(this.components);

  }

};

</script>

<style src="@/assets/styles/css/input.css" />

并将其与以下各项一起使用：v-model

<custom-textarea

    title="Informations complémentaires"

    v-model="otherInformation"></custom-textarea>