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

Posted 2023-02-22

【中文标题】如何使用子组件的道具更新父 v-model？

【英文标题】：How to update parent v-model using child components' prop?

【发布时间】：2020-06-09 20:58:49

【问题描述】：

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

<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 链接到父母的数据。

【问题讨论】：

你的意思是你的更新逻辑在 组件里面，你想用那个方法来更新父母的数据吗？

不，我认为 v-model 不需要更新逻辑

可以多加一点父子组件关系相关的代码吗？ editor 是子组件吗？

【参考方案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 以获得更深入的解释和示例。

【讨论】：

首先，谢谢你，这就是我一直在寻找的。我的子组件有自己的 v-model，我将 props 从父组件提供给子组件 v-model

知道了，我已经用<q-editor> 的用法更新了我的答案。