vue插槽slot的用法

使用場景：父組件向子組件傳遞一些dom元素時

本案例中均以Deatil.vue（父組件） base-layout.vue( 子組件 ) 爲例。

1.老版本的語法

在接下來所有的 2.x 版本中 slot 和 slot-scope特性仍會被支持，但已經被官方廢棄且不會出現在 Vue 3 中。

1)具名插槽

Detail.vue

<template>
    <div>
       <base-layout>
            <div class="header" slot="header">header</div>
            save
            <div class="footer" slot="footer">footer</div>
        </base-layout>
    </div>
</template>

 base-layout.vue

<template>
    <div>
        <slot name="header"></slot>
        <button type="submit">
            <slot>Submit</slot>
        </button>
        <slot name="footer"></slot>
    </div>
</template>

2) 作用域插槽

Detail.vue

<template>
    <div>
         <base-layout>
            <template slot="default" slot-scope="slotProps">
                <p>{{slotProps.value}}</p>
            </template>

            <template slot="other" slot-scope="slotProps">
                <p>{{slotProps.user.name}}</p>
            </template>
          </base-layout>
    </div>
</template>

 base-layout.vue

<template>
    <div>
        <slot v-for="item of list" :value="item"></slot>
        <slot name="other"  :user="userData"></slot>
    </div>
</template>

<script>
    export default {
         data(){
            return{
                list:[1,2,3,4],
                userData:{
                    name:'張三'
                }
            }
        }
    }
</script>

2.新版本語法 2.6.0 起 （v-slot: 可以簡寫爲 #）

1）具名插槽

Detail.vue

<template>
    <div>
        <base-layout>
            <template v-slot:header>
                <p>Here might be a page title</p>
            </template>
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>
            <template #footer>
                <p>Here's some contact info</p>
            </template>
        </base-layout>
    </div>
</template>

 base-layout.vue

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

2) 作用域插槽

Detail.vue

<template>
    <div>
        <base-layout>
            <template v-slot:default="slotProps">
                <p>{{slotProps.value}}</p>
            </template>
            <template #other="slotProps">
                <p>{{slotProps.user.name}}</p>
            </template>

        </base-layout>
    </div>
</template>

 base-layout.vue

<template>
    <div>
        <slot v-for="item of list" :value="item"></slot>
        <slot name="other"  :user="userData"></slot>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[1,2,3,4],
                userData:{
                    name:'鄒賽麗'
                }
            }
        }
    }
</script>