项目内部封装一个通用组件,组件内部有很多插槽,我现在基于这个通用组件增加功能在封装了一层,但是这时候发现slot失效了,
经过多次调试发现,并不是slot失效了,是“通用组件”内部 在使用具名插槽的地方加了一层判断 v-if="$slots[xxx]", 导致元素未渲染,请问这是什么原因呢?
这里可看到 https://codesandbox.io/s/old-pond-95ljj6?file=/src/App.vue
项目内部封装一个通用组件,组件内部有很多插槽,我现在基于这个通用组件增加功能在封装了一层,但是这时候发现slot失效了,
经过多次调试发现,并不是slot失效了,是“通用组件”内部 在使用具名插槽的地方加了一层判断 v-if="$slots[xxx]", 导致元素未渲染,请问这是什么原因呢?
这里可看到 https://codesandbox.io/s/old-pond-95ljj6?file=/src/App.vue
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>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
找到对应的代码改成如下: