vue – props 声明数组和对象操作

当我们通过props传递数组或对象数据时，需要注意以下几点：

1. 父组件向子组件传递数组或对象数据时，需要使用v-bind绑定数据，子组件中需要使用props接收数据。

2. 子组件可以直接使用props接收到的数组或对象数据，也可以对其进行修改操作。但需要注意：Vue不建议直接修改props中的数据，否则可能会导致数据流不清晰，难以维护。

3. 如果子组件需要修改props中的数据，建议将其复制一份后再进行操作。在Vue中，可以使用Object.assign方法或展开运算符(...)来进行浅拷贝。

下面是两个示例，说明使用Vue的props声明数组和对象操作的具体过程：

示例1：父组件向子组件传递数组数据

父组件中：

<template>
  <div>
    <child-component :list="arr"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      arr: ['a', 'b', 'c']
    };
  }
};
</script>

子组件中：

<template>
  <div>
    <ul>
      <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="reverseList">反转数组</button>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    reverseList() {
      this.list.reverse(); // 不建议直接修改props中的数据
    }
  }
};
</script>

在子组件中，我们通过props接收到了父组件传递过来的数组数据list，并将其展示在页面上。同时，我们也提供了一个按钮，通过点击按钮可以将数组反转。

但这里需要注意：我们在修改数组的时候，没有使用this.$set方法，而是直接调用了reverse方法，这是因为我们此时修改的是子组件中的数据，不会对父组件的数据造成影响，因此不需要使用this.$set方法。

但是，如果我们需要修改的是来自父组件的数据，就必须使用this.$set方法，确保数据流清晰、可维护。

示例2：父组件向子组件传递对象数据

父组件中：

<template>
  <div>
    <child-component :person="obj"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      obj: {
        name: '张三',
        age: 18,
        gender: '男'
      }
    };
  }
};
</script>

子组件中：

<template>
  <div>
    <p>我的名字是 {{ person.name }}，我今年 {{ person.age }} 岁，我是{{ person.gender }}性</p>
    <button @click="changePerson">修改我的名字</button>
  </div>
</template>
<script>
export default {
  props: {
    person: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  methods: {
    changePerson() {
      // 复制一份对象数据，然后修改数据
      const obj = Object.assign({}, this.person);
      obj.name = '李四';
      // 通过$emit事件向父组件发送数据
      this.$emit('change', obj);
    }
  }
};
</script>

在子组件中，我们通过props接收到了来自父组件的对象数据person，并展示出了该对象的信息。同时，我们提供了一个按钮，当我们点击按钮时，会将person对象中的name属性修改为“李四”，并通过$emit事件向父组件发送数据。

需要注意的是，我们在修改对象数据时，先将其复制一份，然后再进行修改。这样做的原因是，如果我们直接修改props中的数据，会影响到父组件的数据，使数据流变得不清晰，难以维护。因此，我们建议在子组件中对props中的数组或对象做浅拷贝，并对副本进行修改操作，避免影响父组件的数据。