揭秘Vue Props对象默认值不生效的背后玄机，用计算属性走出困境

问题溯源：深入理解Vue Props对象的默认值机制

在Vue.js中，props是一种特殊的属性，它允许父组件向子组件传递数据。通过在父组件的模板中使用特殊的语法，可以将数据绑定到子组件的props上。当子组件创建时，它将接收父组件传递的数据作为props。

在大多数情况下，props是响应式的，这意味着当父组件中的数据发生变化时，子组件中的相应props也会发生变化。然而，当在props中设置对象的某个属性的默认值时，可能会遇到默认值不生效的问题。

这是因为，当子组件创建时，它会收到父组件传递的数据，如果父组件没有传递该属性，则子组件将使用props中定义的默认值。但是，如果父组件传递了一个空对象，则子组件将收到一个空对象，而不是props中定义的默认值。

计算属性的登场：拯救默认值不生效的困境

为了解决props对象默认值不生效的问题，我们可以借助计算属性。计算属性是一种特殊的属性，它允许您基于其他属性的值计算一个新的值。

在我们的例子中，我们可以创建一个计算属性，该属性返回props对象中某个属性的值。如果父组件没有传递该属性，则计算属性将返回props中定义的默认值。

export default {
  props: {
    myObject: {
      type: Object,
      default: {
        name: 'John Doe',
        age: 30
      }
    }
  },
  computed: {
    myObjectName() {
      return this.myObject.name
    },
    myObjectAge() {
      return this.myObject.age
    }
  }
}

在父组件中，我们可以使用以下代码来传递数据：

<template>
  <MyComponent :my-object="{ name: 'Jane Doe', age: 25 }" />
</template>

在子组件中，我们可以使用以下代码来访问数据：

<template>
  <p>Name: {{ myObjectName }}</p>
  <p>Age: {{ myObjectAge }}</p>
</template>

这样，当父组件传递一个对象时，子组件将显示对象中的数据。当父组件没有传递对象时，子组件将显示props中定义的默认值。

总结：将挑战化为机遇，在Vue中巧用计算属性

通过结合使用props和计算属性，我们可以轻松解决props对象默认值不生效的问题。计算属性为我们提供了一种动态计算属性值的方法，使我们能够在props中设置对象的某个属性的默认值，并确保该默认值在子组件中生效。