求助一个关于Vue 插槽的问题？

  • Z时代
  • 2024-03-15
  • 分类：IT

项目内部封装一个通用组件，组件内部有很多插槽，我现在基于这个通用组件增加功能在封装了一层，但是这时候发现slot失效了，
经过多次调试发现，并不是slot失效了，是“通用组件”内部 在使用具名插槽的地方加了一层判断 v-if="$slots[xxx]", 导致元素未渲染，请问这是什么原因呢？
求助一个关于Vue 插槽的问题？

这里可看到 https://codesandbox.io/s/old-pond-95ljj6?file=/src/App.vue

回答：

找到对应的代码改成如下：

 <template v-for="(scopedSlot, name) in $scopedSlots" v-slot:[name]>

回答：

vue2中如果你要使用作用域插槽，那么应该使用$scopedSlots
HelloWorld

<template>
  <div class="hello">
    <div v-if="$scopedSlots[Slots.Search]">
      <slot :name="Slots.Search" :data="data1"></slot>
    </div>
    ---------
    <div v-if="$scopedSlots[Slots.Tools]">
      <slot :name="Slots.Tools" :data="data2"></slot>
    </div>
  </div>
</template>

MyHelloWorld

<HelloWorld>
  <template v-for="(scopedSlot, name) in $scopedSlots" v-slot:[name]="data">
    <slot :name="name" v-bind="data"></slot>
  </template>
</HelloWorld>

index

<div class="test">
  <HelloWorld>
    <template v-slot:search="slotProps">
      <span>{{(slotProps.data || '111') + 1}}</span>
      <span>{{JSON.stringify(slotProps)}}</span>
    </template>
    <template v-slot:tools="slotProps">
      <span>{{(slotProps.data || '222') + 2}}</span>
      <span>{{JSON.stringify(slotProps)}}</span>
    </template>
  </HelloWorld>
  ||||||||||||
  <MyHelloWorld>
    <template v-slot:search="slotProps">
      <span>{{(slotProps.data || '333') + 3}}</span>
      <span>{{JSON.stringify(slotProps)}}</span>
    </template>
    <template v-slot:tools="slotProps">
      <span>{{(slotProps.data || '444') + 4}}</span>
      <span>{{JSON.stringify(slotProps)}}</span>
    </template>
  </MyHelloWorld>
</div>

以上是 求助一个关于Vue 插槽的问题？ 的全部内容， 来源链接： utcz.com/p/934460.html

回到顶部