Vue.js prop 同步修饰符不更新父组件

Question

我有一个属性需要传递给子组件，但子组件需要能够修改传递的值。似乎.sync修改器是为此构建的，但我似乎无法让它工作。这是我的代码（针对这个问题进行了简化）：

\n

配置文件.vue

\n

<template>\n  <div>\n    <Avatar :editing.sync="editing"></Avatar>\n    <a href="" @click.prevent="changeAvatar">click to change</a>\n    ...\n  </div>\n</template>\n\n<script>\nimport Avatar from \'./profile/Avatar\'\n\nexport default {\n  components: { Avatar },\n  data() {\n    return {\n      ...,\n      editing: false,\n    }\n  },\n  methods: {\n    editAvatar() {\n      this.editing = true;\n    }\n  }\n}\n</script>\n\n

\n

阿凡达.vue

\n

<template>\n  <div>\n    <template v-if="!editing">\n      <img class="avatar-preview" :src="avatar">\n    </template>\n    <template v-else>\n      <label v-for="image in avatars">\n        <img class="avatar-thumb" :src="image">\n        <input type="radio" name="avatar" :checked="avatar === image">\n      </label>\n      <button class="btn btn-primary">Save</button>\n    </template>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: [\'editing\'],\n  data() {\n    return {\n      avatar: \'../../images/three.jpg\',\n      avatars: [\n        \'../../images/avatars/one.jpg\',\n        \'../../images/avatars/two.jpg\',\n        \'../../images/avatars/three.jpg\',\n        ...\n      ]\n    }\n  },\n  methods: {\n    save() {\n      axios.put(`/api/user/${ user.id }/avatar`, { avatar: this.avatar }\n        .then(() => { console.log(\'avatar saved successfully\'); })\n        .catch(() => { console.log(\'error saving avatar\'); })\n        .then(() => { this.editing = false; }); //  \xe2\x86\x90 this triggers a Vue warning\n    }\n  }\n}\n</script>\n

\n

Answer 1

你是对的 -.sync修改器是为这样的情况而构建的。但是，您并没有完全正确地使用它。您不需要直接修改传递的 prop，而是需要发出一个事件，并允许父组件进行更改。

您可以通过更改save()方法来解决此问题Avatar.vue，如下所示：

...
save() {
  axios.put(`/api/user/${ user.id }/avatar`, { avatar: this.avatar }
    .then(() => { console.log('avatar saved successfully'); })
    .catch(() => { console.log('error saving avatar'); })
    .then(() => { this.$emit('update:editing', false); });
  }
}
...