Vue props中Object和Array设置默认值操作

Vue props 是为了子组件从父组件传递数据而设计的机制。在 Vue 中，当我们使用组件时，我们可以通过在组件标签上添加属性来向组件传递数据。而这些数据会被封装成 props 参数传递下去。在本次攻略中我们着重讲解 Vue props 中 Object 和 Array 设置默认值操作的相关内容。

Object 设置默认值

在 Vue props 中，我们可以设置 Object 类型的默认值，为了实现这个目的，我们可以在 props 中定义一个对象并使用一个函数来返回默认值。示例代码如下：

Vue.component('card', {
  props: {
    userInfo: {
      type: Object,
      default: function () {
        return { name: 'Dominic Toretto', age: 42 }
      }
    }
  },
  template: `
    <div>
      {{ userInfo.name }}
    </div>
  `
})

在这个例子中，我们定义了一个叫做 userInfo 的 prop，它的类型是 Object。我们通过一个函数来设置默认值，这个函数将会返回一个对象包含 name 和 age 两个字段。

Array 设置默认值

在 Vue props 中，我们同样可以设置 Array 类型的默认值，对于数组的默认值，我们可以直接使用空数组进行设置。示例代码如下：

Vue.component('list', {
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  template: `
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  `
})

在这个例子中，我们定义了一个叫做 items 的 prop，它的类型是 Array。我们直接使用空数组作为默认值就可以了。

通过以上的示例，我们不难发现 props 中 Object 和 Array 设置默认值的基本写法，通过函数和空数组直接设置即可，这些技巧在 Vue 组件开发中是非常常见和有用的。