Vue插槽 slot 高级特性 必会 用的最多

本质就是 父组件想往子组件里面插些东西

基本使用
父组件 往子组件slot里面插入内容，不插则显示默认值
可插入一段内容 也可以是组件标签都可以
代码
父组件
注： 当插入子组件内容为空时显示子组件插槽中的默认值

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        <!-- slot 基本使用-->
        <SlotDemo>
            <!-- 插入到子组件插槽的内容 -->
            {{info.position}}
        </SlotDemo>
    </div>
</template>

<script>
import SlotDemo from './SlotDemo.vue'
// import ScopedSlotDemo from './ScopedSlotDemo.vue'
// import SlotNamedDemo from './SlotNamedDemo.vue'

export default {
    components: {
        SlotDemo,
        // ScopedSlotDemo,
        // SlotNamedDemo
    },
    data() {
        return {
            info: {
                number: '13',
                position: 'PG',
            }
        }
    }
}
</script>

子组件

<template>
    <div>
        <slot>
            默认内容，即父组件没设置内容时，这里显示
        </slot>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    }
}
</script>

作用域插槽
本质就是将子组件中的数据拿到父组件中来用
父组件代码

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        <!-- slot 作用域插槽使用-->
        <ScopedSlotDemo v-slot="slotProps">
            {{slotProps.slotData}}
        </ScopedSlotDemo>
    </div>
</template>

<script>
// import SlotDemo from './SlotDemo.vue'
import ScopedSlotDemo from './ScopedSlotDemo.vue'
// import SlotNamedDemo from './SlotNamedDemo.vue'

export default {
    components: {
        // SlotDemo,
        ScopedSlotDemo,
        // SlotNamedDemo
    },
    data() {
        return {
            info: {
                number: '13',
                position: 'PG',
            }
        }
    }
}
</script>

子组件代码

<template>
    <div>
        <slot :slotData="name">
            默认内容
        </slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:"Tiger"
        }
    }
}
</script>

具名插槽
本质就是将父组件中的内容，根据名字对号入座插入到子组件中

父组件代码

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>
        <!-- slot 具名插槽-->
        <SlotNamedDemo>
            <template v-slot:header>
                <h1>我来组成头部</h1>
            </template>
            <p>我是主要内容</p>
            <template v-slot:footer>
                <h1>我来组成脚部</h1>
            </template>
        </SlotNamedDemo>
    </div>
</template>

<script>
// import SlotDemo from './SlotDemo.vue'
// import ScopedSlotDemo from './ScopedSlotDemo.vue'
import SlotNamedDemo from './SlotNamedDemo.vue'

export default {
    components: {
        // SlotDemo,
        // ScopedSlotDemo,
        SlotNamedDemo
    },
    data() {
        return {
            info: {
                number: '13',
                position: 'PG',
            }
        }
    }
}
</script>

子组件代码

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

<script>
export default {
    data() {
        return {
        }
    }
}
</script>