有没有办法解构Vue props，无需逐个传属性且避免组件内加device前缀？

实现方案 #

你可以选择以下两种方案实现需求，两种都不需要逐个传递属性，且满足子组件模板不用加device.前缀的要求：

方案1：父端用v-bind批量拆包传递（无需修改子组件现有逻辑） #

这个方案不需要改动你已经写好的子组件props和模板代码，只需要修改父组件的调用写法：
父组件直接把整个device对象用v-bind传递即可，Vue会自动把对象的所有键值对作为独立props传给子组件：

<Device
  v-for="device in devices" 
  :key="device.name"
  v-bind="device"
></Device>

• 优势：零改动子组件现有代码，原有props校验规则依然生效，没有额外性能开销
• 适合场景：不想调整子组件内部逻辑的情况

方案2：子组件接收device prop后批量拆包（满足仅传:device="device"的要求） #

如果你一定要只传:device="device"这一个属性，就可以在子组件内部把device的属性拆成顶层变量使用：

第一步：修改子组件props，只保留device

props: {
  device: {
    type: Object,
    default: () => ({
      type: "",
      number: "",
      name: "",
      plan: "",
      plan_price: "",
      status: 0,
      health: 0
    })
  }
}

第二步：在子组件逻辑层拆包属性

如果是选项式API，在computed里批量定义属性：

computed: {
  ...Object.keys(this.device).map(key => ({
    [key]() { return this.device[key] }
  })).reduce((a,b) => Object.assign(a,b), {})
}

如果是组合式API，直接用toRefs拆包即可：

import { toRefs } from 'vue'
const props = defineProps(['device'])
const { type, number, name, plan, plan_price, status, health } = toRefs(props.device)

做完以上操作后，子组件模板里依然可以直接写{{name}}、:status="status"这类写法，不需要加device.前缀。

注意：方案2如果要保留原有props的类型校验，可以在device的default函数里做校验，或者单独写自定义校验规则。

内容的提问来源于stack exchange，提问作者StevenBoyce