插槽的使用

五、插槽（slot）

1、为什么要使用插槽

slot翻译为插槽，组件的插槽：

1. 组件的插槽也是为了让我们封装的组件更加具有扩展性。
2. 让使用者可以决定组件内容的一些内容到底展示什么

2、如何在组件中使用slot

所有html公共css样式

.box {
    width: 500px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #000;
    ;
}
section {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: skyblue;
}

html结构

我们知道，如果直接想要在父组件中的 中添加内容，是不会在页面上渲染的。>那么我们如何使添加的内容能够显示呢？在子组件内添加slot 即可 ，子组件可以在任意位置添加slot , 这个位置就是父组件添加内容的显示位置

在使用的组件中添加内容

<div id="app">
    <mynav>
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </mynav>
</div>

组件

在组件你需要添加内容的位置添加一对slot标签

<template id="mynav">
    <div class="box">
        <span>&lt;</span>
        <section>
            <slot></slot>
        </section>
        <span>....</span>
    </div>
</template>

JS部分

new Vue({
    el: "#app",
    data: {
    },
    components: {
        mynav: {
            template: '#mynav'
        }
    }
})

2.1、具名插槽

<div id="app">
    <mynav :slotname="slotname">
        <!-- 给每个内容都加上slot属性，给到各自的名字 -->
        <input type="text" slot="input">
        <h1 slot="h1">插槽</h1>
        <div slot="list">
            <a href="http://baidu.com">百度</a>
            <a href="http://sina.com.cn">新浪</a>
            <a href="http://github.com">github</a>
        </div>
        挖坟非递归
    </mynav>
</div>

<template id="mynav">
    <div class="box">
        <span>&lt;</span>
        <section>
            <!-- 给slot加上name属性根据对应的name显示对应的内容 -->
            <slot :name="slotname"></slot>
        </section>
        <span>&gt;</span>
    </div>
</template>

let vm = new Vue({
    el: "#app",
    data: {
        slotname: 'list'
    },
    components: {
        mynav: {
            template: '#mynav',
            props: ['slotname']
        }
    }
})

2.2、作用域插槽

<div id="app">
    <mynav :slotname="slotname">
        <input type="text" slot="input">
        <h1 slot="h1">插槽</h1>
        <!-- 通过slot-scope属性定义一个接受内容的作用域 -->
        <!-- slot-scope 能获取到 slot 上的所有属性 -->
        <div slot="list" slot-scope="listtext">
            {{listtext.msg}}
            <a href="http://baidu.com">百度</a>
            <a href="http://sina.com.cn">新浪</a>
            <a href="http://github.com">github</a>
        </div>
        挖坟非递归
    </mynav>
</div>

<template id="mynav">
    <div class="box">
        <span>&lt;</span>
        <section>
            <!-- 拿到msg -->
            <slot :name="slotname" :msg="msg"></slot>
        </section>
        <span>&gt;</span>
    </div>
</template>

let vm = new Vue({
    el: "#app",
    data: {
        slotname: 'list'
    },
    components: {
        mynav: {
            template: '#mynav',
            props: ['slotname'],
            data(){
                return {
                    msg:'新的插槽'
                }
            }
        }
    }
})

2.1.1、作用域插槽的多种写法

<div id="app">
    <!-- 作用域插槽的多种写法 -->
    // 4、指令写法之模板写法
    <mynav :slotname="slotname" v-slot:list="listtext">
        //基本写法
        <!-- <h3 slot="list" slot-scope="listtext">{{listtext.msg}}</h3> -->
        // 2、基本写法之模板写法
        <!-- <template slot="list" slot-scope="listtext">
            	<h3>{{listtext.msg}}</h3>
        	 </template> -->
        // 3、指令写法
        <!-- <template v-slot:list="listtext">
            	<h3>{{listtext.msg}}</h3>
        	 </template> -->
        <h3>{{listtext.msg}}</h3>
    </mynav>
</div>

<template id="mynav">
    <div class="box">
        <span>&lt;</span>
        <section>
            <!-- 拿到msg -->
            <slot :name="slotname" :msg="msg"></slot>
        </section>
        <span>&gt;</span>
    </div>
</template>

let vm = new Vue({
    el: "#app",
    data: {
        slotname: 'list'
    },
    components: {
        mynav: {
            template: '#mynav',
            props: ['slotname'],
            data(){
                return {
                    msg:'新的插槽'
                }
            }
        }
    }
})