1***@qq.com
1***@qq.com
  • 发布:2023-12-19 11:03
  • 更新:2023-12-19 15:08
  • 阅读:965

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

分类:uni-app

由于小程序中,子组件不能在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 负责人:无 分享
已邀请:

最佳回复

爱豆豆

爱豆豆 - 办法总比困难多

你都用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

要回复问题请先登录注册