与 Vue 中的父级同步道具？

Question

I would like to have a bidirectional property between a component and its child. In this example, I have a shared string which is sent to my sub-components:

<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>

Each subcomponent is just a text input bound to this shared property:

<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>

The expected behaviour is to always see the same value in both text input. If I modify Foo , Bar is updated and the watcher would trig the event Shared value was updated .

I get the error instead:

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

Answer 1

You need to emit event in your child component.

I didn't test this code but it should look something like this.

<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>

Answer 2

You can make your fooBar component to handle prop as a v-model

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

Additional documentation available here