vue 子组件传递对象默认值

在Vue.js中，当你需要从父组件向子组件传递一个对象作为默认值时，可以这样做：

1. **props（属性）传递**: 使用`prop`来接收对象，并设置默认值。在父组件的模板中，你可以像这样定义：

<template>
  <child-component :obj="defaultObject" />
</template>

<script>
export default {
  data() {
    return {
      defaultObject: { key1: 'value1', key2: 'value2' } // 父组件的默认对象
    }
  },
  components: {
    ChildComponent
  }
}
</script>

然后，在子组件中，你可以访问这个属性：

<template>
  <div>{{ obj }}</div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      default: () => ({}) // 如果未提供，则子组件将收到空对象
    }
  }
}
</script>

2. **通过计算属性**: 父组件也可以先计算出一个默认对象，然后传给子组件：

data() {
  return {
    computedDefaultObject: () => ({
      key1: 'value1',
      key2: 'value2'
    })
  }
},
components: {
  ChildComponent
}

然后在子组件里接受这个计算属性：

<template>
  <div>{{ obj }}</div>
</template>

<script>
export default {
  props: {
    obj: Object
  }
}
</script>