与 Vue 中的父级同步道具？

Posted 2023-02-23

【中文标题】与 Vue 中的父级同步道具？

【英文标题】：Sync prop with the parent in Vue?

【发布时间】：2021-01-18 23:19:12

【问题描述】：

我想在组件和它的子组件之间有一个双向属性。在这个例子中，我有一个共享字符串被发送到我的子组件：

<template>
  <div>
    <foobar title="Foo" :value.sync="shared"></foobar>
    <foobar title="Bar" :value.sync="shared"></foobar>
  </div>
</template>
<script>

import Sub from './sub'

export default 
  components: 
    'foobar': Sub
  ,
  watch : 
    shared() 
      console.log("Shared value was updated")
    
  ,
  data() 
    return 
      shared: "Content"
    
  

</script>

每个子组件只是绑定到此共享属性的文本输入：

<template>
  <b-form-group :description="title">
    <b-form-input v-model="value"></b-form-input>
  </b-form-group>
</template>
<script>
export default 
  props: 
    value: String,
    title: String
  

</script>

预期的行为是始终在两个文本输入中看到相同的值。如果我修改Foo，Bar 会更新，观察者将触发事件Shared value was updated。

我得到了错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten 
whenever the parent component re-enters.

【问题讨论】：

你不能改变一个 prop 并期望 parent 中的值改变（除非你正在改变一个对象的属性），正确的方法是在 child 中 $emit 将更新的数据发送给 parent并在父级中使用 v-on 更新数据。

@ChrisLi 是否可以利用.sync？

.sync 和 v-model 没有太大区别，.sync 可以让你使用除 'value' 以外的 props 进行两种方式绑定，但你仍然需要在你的孩子中 $emit 事件组件。

@ChrisLi 是的，这就是 Vue 3 中没有 sync 的原因。相反，您可以有多个 v-models 同步多个道具...

【参考方案1】：

您需要在子组件中发出事件。

我没有测试这段代码，但它应该看起来像这样。

<template>
  <b-form-group :description="title">
    <b-form-input :value="value" @input="$emit('update:value', $event.target.value)"></b-form-input>
  </b-form-group>
</template>
<script>
export default 
  props: 
    value: String,
    title: String
  

</script>

【讨论】：

只能发出一些值：@input="$emit('update:value', value)

@ChristianCarrillo 不，你不能那样做。您只是从内部状态发出value，但value 没有被b-form-input 更新，因为没有v-model。 $event.target.value 是必须的.​​..

试试看告诉我

【参考方案2】：

你可以让你的 fooBar 组件将 prop 作为 v-model 来处理

<foobar title="Foo" v-model:value="shared"></foobar>

其他文档可用here