vue3封装组件 子组件接受父组件的参数用对象好还是一个一个接收好？

Question

<template>
  <el-switch :inactive-value="initData.inactive_value"
             :active-value="initData.active_value"
             v-model="initData.value" :loading="initData.loading">

  </el-switch>
</template>
<script setup>
import {reactive} from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  config: {
    type: Object,
    default: () => ({})
  }

})
const initData = reactive({
  value: props.data[props.config.api_param],
  loading: false,
  inactive_value: props.config.inactive_value,
  active_value: props.config.active_value
})

</script>

比如我封装了一个组件 但是我时间久了 根本不知道这个对象要传递什么东西

config: {
  active_value: 1,
  inactive_value: 0,
  api_id: 'id',
  api_param: 'status',
  api_url: '',
}

Answer 1

看具体情况吧，是散装着用的，还是需要整体传入一个option去配置的。
比如说一些开关，比如说是否可用、是否多选我都会是单个的传入。
一些比如所EChart图表，我一般会单独声明 width 和 height ，然后 options 我会整个传入进去。

其实从一些UI库的文档里面都能看出来，取决于对应组合、属性的复杂度。

至于时间久了，根本不知道这个对象要传递什么东西的部分：

1. 写好注解
2. 上TS

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。