如何使用子组件的道具更新父 v-model？

Question

我的父组件有以下子组件：

<editor :editorBody="formData.englishBody"></editor>

我的父组件有以下数据：

data () {
  return {
    // allContent: null,
    formData: {
      englishTitle: '',
      nepaliTitle: '',
      englishBody: '',
      nepaliBody: '',
      activeInactive: false,
      userId: null
    },
    rowId: null
  }
}

我的子组件有自己的v-model，我正在将道具从父组件提供给子组件v-model。

<q-editor v-model="editorBody"></q-editor>

formData.englishBody 是父组件数据。我想使用editor 子组件更新formData.englishBody。 editor 子组件是 textarea。基本上，我想将孩子的v-model 链接到父母的数据。

Answer 1

您需要确保每当<editor> 组件更新editorBody 值时，它不会直接分配给道具，因为这是不允许的（道具从父级到子级是单向的），而是需要使用新值发出事件。

约定是使用新值发出一个名为update:editorBody 的事件。然后父组件可以监听该事件并更新formData.englishBody以响应该事件：

<editor
  :editorBody="formData.englishBody"
  @update:editorBody="formData.englishBody = $event"
>

这可以简化为：

<editor :editorBody.sync="formData.englishBody">

这是一个特殊的two-way binding。

请记住，<editor> 必须发出 update:editorBody 事件！这意味着您不能在<editor> 组件模板中使用v-model="editorBody"。

在您的 <editor> 组件中，更改以下内容：

<q-editor v-model="editorBody">

对此（假设<q-editor>didn't customize v-model）：

<q-editor
  :value="editorBody"
  @input="$emit('update:editorBody', $event)"
>

请咨询docs 以获得更深入的解释和示例。