關於uniapp的插槽

前置步驟

在中pages.json 如下圖，可進行全局組件的引用

 

需要文件：index.vue(主頁)  my-form.vue(組件)

 

1、以組件內容為默認視圖

my-form.vue(組件)

<template>
    <view>
        <view>默認視圖</view>
        <slot></slot>
    </view>
</template>

 

index.vue(主頁) 

 <!--引入組件-->
 <my-form>
    新加的視圖代碼
 </my-form>

 

 

  效果

 

 

 

 2、后備內容（當插槽未有內容時，顯示默認的內容）

 

 

 

 

  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>

 

效果

 

 

 

 

 

 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>

 

效果

 

 

 

基於第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>

 

 

結果：

 

 

 

參考來源：https://blog.csdn.net/qq_40666120/article/details/106899722