Vue Prop 数组默认值

在 Vue 中，我们可以使用 prop 来传递组件之间的数据。如果 props 是一个数组，它的默认值可以是一个空数组。在本文中，我们将讨论如何设置 prop 数组的默认值。

基本用法

在组件的 props 中，我们可以指定数组类型的 prop，具体方法如下：

props: {
  items: Array
}

我们可以通过添加 default 属性来设置数组的默认值：

props: {
  items: {
    type: Array,
    default: []
  }
}

这样，如果在父组件没有传递 items 属性，则 items 将会是一个空数组。

注意事项

在使用数组默认值时，需要注意以下几点：

1. 不要将数组的默认值设置为一个对象

如果我们将数组的默认值设置为一个对象，那么如果多个组件使用了这个 prop，它们将共享同一个对象。这可能会导致意外的数据突变，从而影响其他组件的行为。因此，我们应该将数组默认值设置为一个空数组。

2. 不要直接修改数组的默认值

默认值在 Vue 中只会被设置一次，这意味着如果我们直接修改了默认值，那么其他组件也会受到影响。如果需要修改数组的值，我们应该在组件内部使用一个 data 属性来存储它。

3. 使用深拷贝来复制数组

如果我们需要在组件内部修改数组的值，为避免修改默认值，我们应该使用深拷贝来复制数组。可以使用 JSON.parse(JSON.stringify()) 或者第三方库如 lodash 的 cloneDeep() 方法来实现。

示例

下面是一个简单的示例，演示如何在 Vue 中设置数组默认值：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      localItems: [] // 用于存储修改后的数组
    }
  },
  mounted() {
    this.localItems = JSON.parse(JSON.stringify(this.items)) // 深拷贝数组
    this.localItems.push('Item 4') // 在组件内部修改数组
  }
}
</script>

在上面的代码中，我们设置了数组类型的 prop items，并将默认值设置为一个空数组。然后，我们在组件内部定义了一个 localItems 属性，用于存储复制并修改后的数组。在 mounted 钩子函数中，我们使用深拷贝方法将 items 数组复制到 localItems 中，并向其中添加了一个新的元素。

这样，无论在父组件有没有传递 items，我们都可以在组件内部正确地操作数组，并且不会影响到其他组件。

结论

设置 Vue Prop 数组的默认值非常简单，但是还需要注意一些细节。使用 default 属性可以方便地设置数组的默认值，而对于数组的操作，应该使用深拷贝来复制数组，并且不要直接修改默认值。