Vue如何实现 v-slot:item.status 这样的作用域插槽写法？

Question

使用 Vuetify 框架的 v-data-table 组件有感。

其中自定义 列 的写法如下：

<template v-slot:item.status="{ item }">
    <!--dom-->
</template>

于是我照葫芦画瓢，写了插槽的代码，但是无用。

<slot v-bind:item[col.value]='item'></slot>

求大神答疑解惑！

---

补充说明

v-data-table 中 Row 组件的部分源码

render (h, { props, slots, data }): VNode {  
  const computedSlots = slots()  
  
  const columns: VNode[] = props.headers.map((header: DataTableHeader) => {  
    const children = []  
    const value = getObjectValueByPath(props.item, header.value)  
  
    const slotName = header.value  
    const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]  
    const regularSlot = computedSlots[slotName]  
  
    if (scopedSlot) {  
      children.push(scopedSlot({ item: props.item, header, value }))  
    } else if (regularSlot) {  
      children.push(regularSlot)  
    } else {  
      children.push(value == null ? value : String(value))
    }  
    
    const textAlign = `text-${header.align || 'start'}`  
  
    return h('td', {  
      class: {  
        [textAlign]: true,  
        'v-data-table__divider': header.divider,  
      },  
    }, children)  
  })  
  
  return h('tr', data, columns)  
},

---

Answer 1

bind后面应该是一个属性名才对 应该是类似a而不是a.b