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

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

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/

示例代码段

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

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

2 个答案: