使用 VueJs 更改子组件中对象的属性

Question

我有一个简单的问题，但我找不到答案。这段代码（属于子组件？是一个好习惯吗？

 export default {
  name: 'Wish',
  props: ['wish'],
  data () {
    return {
      isEditing: false
    }
  },
  methods: {
    completeWish () {
      this.wish.done = true
    },
   ...

或者我应该使用emit更新父级中wish对象的done属性？

谢谢

Answer 1

正如 Amade 所说，这是一种不好的做法。

您应该使用事件以便从设计的角度正确地完成它。

<script>
  export default {
    name: 'Wish',
    props: ['wish'],
    methods: {
      completeWish () {
        this.$emit('wish-is-completed')
      }
    }
  }
</script>

然后在父母你有v-on:wish-is-completed="handleCompletedWish"喜欢：

// Parent template
<template>
  <wish v-on:wish-is-completed="handleCompletedWish"></wish>
</template>

编辑：

我知道答案被否决了，因为您实际上能够改变道具的属性（不是直接的道具参考）并且在您这样做时不会收到警告。

这是否意味着你应该这样做？

不。

道具是为单向数据流目的而创建的。当你改变 props 来通知父级某事时，它很快导致难以维护状态更改，因为它们不是隐式的。在这种情况下，按照官方文档的建议，将事件用于 child->parent 通信。

所有的 props 在子属性和父属性之间形成一种单向向下绑定：当父属性更新时，它会向下流到子属性，而不是相反。这可以防止子组件意外改变父组件的状态，这会使您的应用程序的数据流更难以理解。

Answer 2

文档：

由于现代 JavaScript 的限制（以及 Object.observe 的废弃），Vue 无法检测属性添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有反应性

如果你想添加或更改属性，请使用Vue.set，如下所示：

this.$set(this.wish, 'done', true)

请参阅示例应用程序： https ://3xyx386q65.codesandbox.io/setProps

请参阅示例代码（打开Components/setProps/childComponent.vue）： https: //codesandbox.io/s/3xyx386q65

笔记！ wish初始化为对象！请参阅示例代码中的Components/setProps/setProps.vue