Question

我正在Vuetify应用中使用Vue2Editor。我将text-editor的一个组成部分设为：

<vue-editor
  :value="text"
  @input="updateText"
></vue-editor>

它的道具是：

props: {
  text: {
    type: String,
    required: true
  }
},

为了进行验证，我在父组件中调用它并为其提供v模型（VeeValidate需要它）：

<text-editor
  :text="UnitData.Details"
  v-model="UnitData.Details"
  @updateText="UnitData.Details = $event"
  data-vv-name="details"
  v-validate="'required|min:100'"
/>

现在来看，text和v-model具有相同的值，我需要在子组件中使用v模型（使用vModel道具，但不起作用），这样我就不会得到重复的代码，有什么建议吗？

Answer 1

text-editor组件：

<vue-editor
  :value="value"
  @input="updateText"
></vue-editor>

props: {
  value: {
    type: String,
    required: true
  }
},
methods: {
  updateText () {
    this.$emit('input', this.value)
  }
}

父母

<text-editor
  v-model="UnitData.Details"
/>

请参见https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

在子组件Vue中获取v模型值

1 个答案: