Vue 插槽的基本使用

默认插槽

子组件

<template>
    <div>
        <h1 style="color: blue">{{title}}</h1>
        <!-- 指定数据显示的位置 -->
        <slot>默认显示的内容</slot>
    </div>
</template>

<script>
    export default {
        name: "SlotDemo",
        props: ['title']
    }
</script>

父组件

<template>
    <div id="app">
        <SlotDemo title="默认插槽">
            <!-- 函数体的内容替换<slot></slot> -->
            <p>这是给默认插槽的数据</p>
        </SlotDemo>
    </div>
</template>

<script>
    import SlotDemo from '@/components/SlotDemo/SlotDemo'

    export default {
        name: 'App',
        components: {SlotDemo},
    }
</script>

具名插槽

子组件

<template>
    <div>
        <h1 style="color: blue">{{title}}</h1>
        <!-- 指定数据显示的位置，并设置name -->
        <slot name="slotOne">name: slotOne的插槽默认显示的内容</slot>
        <slot name="slotTwo">name: slotTwo的插槽默认显示的内容</slot>
    </div>
</template>

<script>
    export default {
        name: "SlotDemo",
        props: ['title']
    }
</script>

父组件

<template>
    <div id="app">
        <SlotDemo title="具名插槽">
            <!-- 函数体的内容替换<slot name="slotOne"></slot> -->
            <p slot="slotOne">这是给name: slotOne的插槽的数据</p>
        </SlotDemo>

        <SlotDemo title="具名插槽">
            <!-- 函数体的内容替换<slot name="slotTwo"></slot> -->
            <template v-slot:slotTwo>
                <p>这是给name: slotTwo的插槽的数据</p>
            </template>
        </SlotDemo>
    </div>
</template>

<script>
    import SlotDemo from '@/components/SlotDemo/SlotDemo'

    export default {
        name: 'App',
        components: {SlotDemo},
    }
</script>

作用域插槽

子组件

<template>
    <div>
        <h1 style="color: blue">{{title}}</h1>
        <!-- 指定数据显示的位置，并设置数据给父组件使用 -->
        <slot :myData="myData">name: slotOne的插槽默认显示的内容</slot>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name: "SlotDemo",
        props: ['title'],
        data(){
            return {
                myData: nanoid()
            }
        }
    }
</script>

父组件

<template>
    <div id="app">
        <SlotDemo title="作用域插槽">
            <template scope="scopeData">
                <!-- 函数体的内容替换<slot></slot> -->
                <p>这是从插槽拿到的数据: {{scopeData.myData}}</p>
            </template>
        </SlotDemo>

        <SlotDemo title="作用域插槽">
            <template slot-scope="scopeData">
                <!-- 函数体的内容替换<slot></slot> -->
                <p>这是从插槽拿到的数据: {{scopeData.myData}}</p>
            </template>
        </SlotDemo>
    </div>
</template>

<script>
    import SlotDemo from '@/components/SlotDemo/SlotDemo'

    export default {
        name: 'App',
        components: {SlotDemo},
    }
</script>