在微信小程序子组件中判断某个插槽是否存在？

分类：uni-app

微信小程序 uniapp

由于小程序中，子组件不能在for中嵌套插槽

我想的是，父组件中传入多个动态插槽名的插槽：

        //用法1，使用插槽  
        <yMain>  
            <div  
                v-for="(item, i) in arr" :key="i"  
                :slot="item.id"  
            >  
                {{item.val}}  
            </div>  
        </yMain>  

        //用法2，不使用插槽  
        <yMain></yMain>

子组件yMain中：

        <div v-if="!$scopedSlots[arr[0].id] && !$slots[arr[0].id]">  
                <!--未使用插槽-->  
                <div  
                    v-for="(item, i) in arr" :key="i"  
                >  
                    11111111  
                </div>  
            </div>  
           <!--使用插槽-->  
            <div v-else>  
                <div  
                    v-for="(item, i) in arr" :key="i"  
                >  
                    <!-- #ifdef H5 -->  
                    <slot :name="item.id"></slot>  
                    <!-- #endif -->  
                    <!-- #ifndef H5 -->  
                    <slot name="{{item.id}}"></slot>  
                    <!-- #endif -->  
                </div>  
            </div>  
        </div>

然后在子组建中循环拿到每个插槽。

由于插槽可传可不传，我需要在子组件中通过$scopedSlots或者$slots判断有没有指定插槽，但是动态插槽名的插槽在小程序中好像拿不到，无论是$scopedSlots还是$slots打印的都是{default: true}

包括父组件这么写

return {  
            slotId: "form"+1111  
 }  
<div :slot="slotId">4444</div>

子组件里$scopedSlots和$slots打印的都是{{{slotId}}: true}

2023-12-19 11:03 负责人:无分享

1 个回复

最佳回复

爱豆豆 - 办法总比困难多

你都用id判断了直接拿传递过来的arr数组判断不就行了用不着$scopedSlots和$slots啊
你看下面代码是不是你想要的效果

// index.vue  
<template>  
    <view>  
        <cardSlot :arr="slotList">  
            <template v-for="item in slotList" >  
                    <view :key="item.id" v-if="item.id" :slot="item.id">{{item.text}}</view>  
            </template>  
        </cardSlot>  
    </view>  
</template>  
<script>  
    import cardSlot from './components/card-slot.vue'  
    export default {  
        components:{cardSlot},  
        data() {  
            return {  
                slotList:[{  
                    id:'1',  
                    text:'显示'  
                },{  
                    id:'2',  
                    text:'显示'  
                },{  
                    id:'',  
                    text:'不显示'  
                },{  
                    id:'4',  
                    text:'显示'  
                }]  
            }  
        }  
    }  
</script>

// card-slot.vue  
<template>  
    <view>  
        <view v-for="(item, i) in arr" :key="item.id">  
            <!-- #ifdef H5 -->  
            <slot :name="item.id">未使用插槽</slot>  
            <!-- #endif -->  
            <!-- #ifndef H5 -->  
            <slot v-if="item.id" :name="item.id"></slot>  
            <view v-else>未使用插槽</view>  
            <!-- #endif -->  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        props: ['arr']  
    }  
</script>

通过你定义的id 去判断是否显示当前插槽

1***@qq.com (作者)

其实是这个效果，但是感觉通过数据里面的某个属性来判断是否使用插槽，感觉不是很好啊

2023-12-19 16:19
爱豆豆

回复 1***@qq.com: 那你就改一下使用单独属性直接控制关闭插槽

2023-12-19 16:32
1***@qq.com (作者)

回复爱豆豆: 我之前想的是props里加一个slotList表示插槽name列表。

还有一种方法是参考微信小程序的地图的自定义气泡功能，但不是很理解他map组件里是怎么实现的。

map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。

<map markers=”arr“>

<cover-view slot="callout">

<cover-view marker-id="item.id" v-for="(item, i) in arr" :key="item.id"></cover-view>

</cover-view>

</map>

他地图组件只有一个callout插槽，在插槽里循环，地图组件里每个点位通过插槽循环里的marker-id来匹配找到对应的html代码

2023-12-19 16:44
爱豆豆

回复爱豆豆: 你说的这俩都不是一个问题吧

2023-12-19 16:57
1***@qq.com (作者)

回复爱豆豆:

https://developers.weixin.qq.com/miniprogram/dev/component/map.html#marker-%E4%B8%8A%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B0%94%E6%B3%A1-customCallout

微信原生小程序的方案，按我的理解应该是下面这个意思

父组件：

<map markers=”arr“>

<cover-view slot="callout">

<cover-view marker-id="item.id" v-for="(item, i) in arr" :key="item.id"></cover-view>

</cover-view>

</map>

map组件：

<template>

<view>

<view v-for="(item, i) in markers" :key="item.id">

找到callout插槽中marker-id="item.id"的cover-view并显示

</view>

</view>

</template>

这样的话就只有一个名称为slot="callout"的插槽，不存在插槽动态名称的问题，也就能通过$scopedSlots和$slots来判断插槽callout是否存在了。

2023-12-19 17:41

要回复问题请先登录或注册

在微信小程序子组件中判断某个插槽是否存在？

1 个回复

公告

相关问题

在微信小程序子组件中判断某个插槽是否存在？

与内容相关的链接

1 个回复

公告

相关问题