Vue：改变传递给组件的道具的正确方法？

Question

在下面的伪代码中，我有一个父组件，其初始数据为name 和ages，我将它们作为道具传递给child-component。

我的child-component 将它们作为道具，但如果我想改变道具怎么办。例如，假设我想反转 name 属性字符串。或者如果我想pop() ages 数组的最后一个年龄？我是否必须将这些道具设置为子组件中的初始数据？

家长

<template>

      <child-component :name=name :ages=ages></child-component>
</template>


data() {
    return {
        name: "Alex",
        ages: [23,41,94],
    }
}

儿童

props: {
    name: {type: String},
    ages: {type: Array},
}

Answer 1

您不应该改变子组件中的道具。这不是一个好习惯。 见Vue 2 - Mutating props vue-warn

Answer 2

编辑：也可以与这样的计算设置器配对完成

export default {
  props: ['propText'],
  data() {
    return {
      dataText: ''
    }
  },
  computed: {
    textValue: {
      get () {
        return this.dataText || this.propText
      },
      set (newValue) {
        this.dataText = newValue
      }
    }
  }
}

---

您有多种方法，例如将您的逻辑用于 computed（并直接显示），将 prop 值复制到 data（并在那里对其进行变异/处理）或将值发送回父级然后对孩子进行修改。

Michael Thiessen 的这篇文章对这个主题很好：https://michaelnthiessen.com/avoid-mutating-prop-directly/

一个例子sn-p

export default {
  name: 'ReversedList',
  props: {
    list: {
      type: Array,
      required: true,
    }
  },
  computed: {
    reversedList() {
      return this.list.reverse();
    }
  }
};