Javascript Vue如何在子组件中的同步道具上使用v-model

在父组件中，我使用

.sync

传递一个道具以实现双向绑定，在子组件中，我只需将该道具绑定到

v-model

，这样，我希望子组件中的任何更改都可以通过该

.sync

道具传播到父组件。然而，我收到了警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

---

我做错什么了吗？根据vue文档，

.sync

是通过双向数据绑定设计的。如何在子组件中执行此操作？

子组件不应在同步的

道具上使用
v-model
。相反，它应该使用
$emit（'update:'，value）
。但是，从父级使用
v-model
，从子级使用
$emit（'input'，value）
可能更有意义：

// parent implementation
<child-component v-model="first_name" />

// child component
watch: {
  innerValue: function (value) { 
    this.$emit('input', value)
  }
}

然后，您可以在孩子的组件自定义组件实现上使用
v-model
：

// child component
<template>
  <custom-component v-model="innerValue" />
</template>

//子组件
孩子不应该在同步的
道具上使用
v-model
。相反，它应该使用
$emit（'update:'，value）
。但是，从父级使用
v-model
，从子级使用
$emit（'input'，value）
可能更有意义：

// parent implementation
<child-component v-model="first_name" />

// child component
watch: {
  innerValue: function (value) { 
    this.$emit('input', value)
  }
}

然后，您可以在孩子的组件自定义组件实现上使用
v-model
：

// child component
<template>
  <custom-component v-model="innerValue" />
</template>

//子组件