Vue小技巧

业务场景

在正常业务中列表组件通常会进行公共封装，例如统一的样式、统一的按钮处理等，本次小技巧适用于，在公共table组件中使用插槽，在另外的一个组件B中引用了table组件，并且也使用了插槽，这样的话如果组件C引用组件B时，传到组件table的插槽数据写法就会有问题，出现template直接嵌套template的情况，引发报错。

插槽嵌套

如果遇到插槽嵌套的情况，直接使用template嵌套template会报错，当你不想或者不能额外添加其他元素标签时，你可以这么做。

组件A a-component

<table>
    <tbody>
        <td v-for="item in data">
            <slot :item="item" :name="item.key">
                {{ item.title }}
            </slot>
        </td>
    </tbody>
</table>

组件Bb-component

<div>
    <a-component>
         <template v-for="(index, name) in tableSlot" v-slot:[name]="data">
        <slot :name="name" :record=" data?data.item:{}"></slot>
      </template>
    </a-component>
</div>
​

export default defineComponent({
    setup(props, { slots, emit }) {
       const tableSlot = computed(() => {
      let s = {};
      for (let key in slots) {
       (key !== "query"&&key !== "operationEx") && (s[key] = slots[key]);
      }
      return s;
    });
    })
    
})

组件C

<b-component>
    <template #key1>
        <a>链接</a>
    </template>
    <template #key2>
        <input />
    </template>
    <template #key3>
        <button>按钮</button>
    </template>
</b-component>

可使用如下方法处理：

在B组件中 获取到所有插槽，排除掉组件C中自己使用的，剩下的使用for语句加载到组件A中,如上面组件B中示例代码，该方法可以避免template直接嵌套template