关于uniapp的插槽

前置步骤

在中pages.json 如下图,可进行全局组件的引用

关于uniapp的插槽

 

需要文件:index.vue(主页)  my-form.vue(组件)

 

1、以组件内容为默认视图

my-form.vue(组件)

<template>
    <view>
        <view>默认视图</view>
        <slot></slot>
    </view>
</template>

 

index.vue(主页) 

 <!--引入组件-->
 <my-form>
    新加的视图代码
 </my-form>

 

 

  效果

关于uniapp的插槽

 

 

 

 2、后备内容(当插槽未有内容时,显示默认的内容)

 关于uniapp的插槽

 

 

 

  3、具名插槽

可以给组件中的<slot> 添加name,<slot name="aaa">,此时 该<slot name="aaa"> 将绑定父级中指定的“v-slot:name”

my-form.vue(组件):

<template>
    <view>
        <view>默认视图(子级)</view>
        <slot name="aaa">指定绑定slot,名字为aaa(子级)</slot>
        <slot>未绑定slot,无名字(子级)</slot>
    </view>
</template>

 

index.vue(主页) 

<!--引入组件-->
<my-form>

   <view :slot="‘aaa‘">指定aaa视图代码(父级)</view>
   <!--或者-->
   <template v-slot:aaa>作用同上,但是同name下等级比较高,优先渲染</template>

   <view>未指定任何name的视图代码(父级)</view>
</my-form>

 

效果

关于uniapp的插槽

 

 

 

 

 

 4、解结构插槽(将组件data中的数组数据,返回给父级的视图,从父级遍历渲染插槽,感觉有点鸡肋)

my-form.vue(组件):

<template>
    <view>
        <slot :postData="postData">未绑定slot,无名字(子级)</slot>
    </view>
</template>
<script>
    export default {
        name: "my-form",
        data() {
            return {
                postData:[{
                    title:"标题"
                }]
            }
        },
    }
</script>

 

index.vue(主页) 

    <my-form>
       <template v-slot="{postData}">
           <view v-for="(item,index) in postData" v-key="index">
               {{item.title}}
           </view>
       </template>

    </my-form>

 

效果

关于uniapp的插槽

 

 

 

基于第4点,可以将data 放在父级,由父级传给子级,

index.vue(主页)

<template>
    <view>

        <!--引入组件-->

        <view class="slot-item">
            <my-form :todos="todos">
                <!--绑定一个命名为“slotName”的slot-->
                <template v-slot:slotName="{ thisItemData }">
                    <span v-if="thisItemData.isComplete">?</span>
                    {{ thisItemData.text }}
                </template>
            </my-form>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                todos: [{
                    text: "aa",
                    id: "aa",
                    isComplete: false
                }, {
                    text: "bb",
                    id: "bb",
                    isComplete: true
                }, {
                    text: "cc",
                    id: "cc",
                    isComplete: false
                }]
            };
        },
    }
</script>

 

 

 

my-form.vue(组件):

<template>
    <view>
        <view v-for="(todoitem,todoIndex) in todos" :key="todoIndex">

            <!--通过thisItemData 返回给父级-->
            <slot name="slotName" :thisItemData="todoitem">
                <!-- 后备内容 -->
                {{ todoitem.text }}
            </slot>
        </view>
    </view>
</template>


<script>
    export default {
        name: "my-zujian",
        props: {
            todos: { //类型
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {}
        },
    }
</script>

 

 

结果:

关于uniapp的插槽

 

 

 

参考来源:https://blog.****.net/qq_40666120/article/details/106899722

 

关于uniapp的插槽

上一篇:安卓的apk加载的流程


下一篇:group by分组