[JavaScript知识库]Vue2.0 slot插槽

不使用插槽

使用组件，把不同数据分装起来，组件名就叫Category(分类)

Category.vue

<template>
    <div class="category">
        <h3>xxx分类</h3>
        <ul>
            <li>xxxxxxx</li>
            <li>xxxxxxx</li>
            <li>xxxxxxx</li>
            <li>xxxxxxx</li>
        </ul>
    </div>
</template>

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

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
</style>

引入Category.vue > App.vue

<template>
    <div class="container">
        <Category title="美食" :listData="foods"/>
        <Category title="游戏" :listData="games"/>
        <Category title="书籍" :listData="films"/>
    </div>
</template>

<script>
    import Category from '@/components/Category'
    export default {
        name:'App',
        components:{Category},
        data(){
            return{
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['崩坏三','原神','红色警戒','公主连结'],
                films:['《python从入门到如土》','《java从入门到如土》','《mysql从入门到如土》','《前端从入门到如土》']
            }
        }
    }
</script>

<style lang="css">
    .container{
        display: flex;
        justify-content: space-around;/*主轴对齐方式 */
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

接下来修改Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <ul>
            <li v-for="(l,index) in listData" :key="index">{{l}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'Category',
        components:{},
        props:['listData','title1']
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
</style>

要改需求了

默认插槽

我们这么写:

App.vue

<template>
    <div class="container">
        <Category title1="美食" :listData="foods">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </Category>
        <!-- <Category title1="游戏" :listData="games"/>
        <Category title1="书籍" :listData="films"/> -->
    </div>
</template>

没有图片，<img>标签绝对解析了；就是vue解析完不知道往哪里放

用什么办法告诉Vue放在哪里

用一个特殊的标签<slot></slot>

Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <!-- <ul>
            <li v-for="(l,index) in listData" :key="index">{{l}}</li>
        </ul> -->
        <!-- <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> -->
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <slot>这里是一个插槽，没有使用者填充，就显示这一段</slot>
    </div>
</template>

默认插槽的写法(整体语句)

App.vue

<template>
    <div class="container">
        <Category title1="美食">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </Category>
        <Category title1="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
        </Category>
        <Category title1="书籍">
            <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
        </Category>
    </div>
</template>

<script>
    import Category from '@/components/Category'
    export default {
        name:'App',
        components:{Category},
        data(){
            return{
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['崩坏三','原神','红色警戒','公主连结'],
                films:['《python从入门到如土》','《java从入门到如土》','《mysql从入门到如土》','《前端从入门到如土》']
            }
        }
    }
</script>

<style lang="css">
    .container{
        display: flex;
        justify-content: space-around;/*主轴对齐方式 */
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
</style>

Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <!-- <ul>
            <li v-for="(l,index) in listData" :key="index">{{l}}</li>
        </ul> -->
        <!-- <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> -->
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <slot>这里是一个插槽，没有使用者填充，就显示这一段</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        components:{},
        props:['title1']
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    img{
        width: 100%;

    }
</style>

<Category>里面的内容最终放到了<slot>这里是一个插槽，没有使用者填充，就显示这一段</slot>

注意的是:<Category>里面的内容是在App.vue组件里完成了解析后，再塞到Category.vue里面去的，所以<Category>里面的内容都可以写在App.vue的样式里面，如果App.vue里面没写也可以在Category.vue里面写样式,这就是插槽的基本使用(这里是默认插槽)

具名插槽(具有名字的插槽)

你可以写一个插槽可以实现不要非得写俩个，但是插槽多了，你得给他起一个名

如果说你这么写：

Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <!-- <ul>
            <li v-for="(l,index) in listData" :key="index">{{l}}</li>
        </ul> -->
        <!-- <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> -->
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <slot>这里是一个插槽，没有使用者填充，就显示这一段</slot>
        <slot>这里是一个插槽，没有使用者填充，就显示这一段</slot>
    </div>
</template>

App.vue

<template>
    <div class="container">
        <Category title1="美食">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
            <a href="https://www.bilibili">更多美食</a>
        </Category>
        <Category title1="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
        </Category>
        <Category title1="书籍">
            <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
        </Category>
    </div>
</template>

你就会发现每一个都变成了俩个了。

插槽确实得写多个，但是每一个插槽都得有一个自己的名字。怎么去指定名字:

Category.vue

<slot name="center">这里是一个插槽，没有使用者填充，就显示这一段</slot>
<slot name="footer">这里是一个插槽，没有使用者填充，就显示这一段</slot>

但是要给他去指定名字:

特殊的属性slot

App.vue

<Category title1="美食">
    <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
	<a  slot="footer" href="https://www.bilibili">更多美食</a>
</Category>

包裹东西，还省了一层结构

<template slot="footer">
    	<div class="foot">
         	<a href="#">经典</a>
            <a href="#">热门</a>
           	<a href="#">推荐</a>
    	</div>
	<h4>欢迎前来观看</h4>
</template>

slot有一个最新的写法:

<template v-slot:footer>
    	<div class="foot">
         	<a href="#">经典</a>
            <a href="#">热门</a>
           	<a href="#">推荐</a>
    	</div>
	<h4>欢迎前来观看</h4>
</template>

但是

v-slot can only used on components or <template>.

v-slot仅仅能被使用在组件的<template>标签上

作用域插槽

App.vue

<template>
    <div class="container">
        <Category title1="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
        </Category>
        
        <Category title1="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
        </Category>
        
        <Category title1="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
        </Category>
    </div>
</template>

<script>
    import Category from '@/components/Category'
    export default {
        name:'App',
        components:{Category},
        data(){
            return{
                games:['崩坏三','原神','红色警戒','公主连结'],
            }
        }
    }
</script>

<style lang="css">
    .container,.foot{
        display: flex;
        justify-content: space-around;/*主轴对齐方式 */
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
    h4{
        display: flex;
        justify-content: center;
    }
</style>

Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <!-- <ul>
            <li v-for="(l,index) in listData" :key="index">{{l}}</li>
        </ul> -->
        <!-- <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> -->
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <slot>这里是一个插槽，没有使用者填充，就显示这一段</slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        components:{},
        props:['title1']
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    img{
        width: 100%;

    }
</style>

App组件里面你用到了Category这个组件，所以App组件就是Category组件的使用者；数据是放在了App组件里

如果把数据放在Category里面

App.vue

<template>
    <div class="container">
        <Category title1="游戏">
        </Category>

        <Category title1="游戏">
        </Category>

        <Category title1="游戏">
        </Category>
    </div>
</template>

<script>
    import Category from '@/components/Category'
    export default {
        name:'App',
        components:{Category},
        
    }
</script>

<style lang="css">
    .container,.foot{
        display: flex;
        justify-content: space-around;/*主轴对齐方式 */
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
    h4{
        display: flex;
        justify-content: center;
    }
</style>

Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <!-- <ul>
            <li v-for="(l,index) in listData" :key="index">{{l}}</li>
        </ul> -->
        <!-- <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> -->
        <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
        <!-- <slot>这里是一个插槽，没有使用者填充，就显示这一段</slot> -->
        <ul>
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'Category',
        components:{},
        props:['title1'],
        data(){
            return{
                games:['崩坏三','原神','红色警戒','公主连结'],
            }
        }
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    img{
        width: 100%;

    }
</style>

提出需求:

• 第一次使用游戏分类的时候，根据游戏生成的是一个无序的列表
• 第二次生成不是无序是结构发生了变化（也就是前面生成1,2,3,4）
• 第三次使用还是这三个游戏但是我想让这四个游戏不是什么列表。每一个游戏都是<h4>标题

不能写在Category.vue不然都一样,我把它写在使用者，让使用者知道这是一个无序的列表,第二次使用得通过某种办法告诉它是一个有序的列表,…

App.vue

<template>
    <div class="container">
        <Category title1="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{l}}</li>
            </ul>
        </Category>

        <Category title1="游戏">
            <ol>
                <li v-for="(g,index) in games" :key="index">{{l}}</li>
            </ol>
        </Category>

        <Category title1="游戏">
            <h4 v-for="(g,index) in games" :key="index">{{l}}</h4>
        </Category>
    </div>
</template>

<script>
    import Category from '@/components/Category'
    export default {
        name:'App',
        components:{Category},
        
    }
</script>

<style lang="css">
    .container,.foot{
        display: flex;
        justify-content: space-around;/*主轴对齐方式 */
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    video{
        width: 100%;
    }
    h4{
        display: flex;
        justify-content: center;
    }
</style>

Category.vue

<template>
    <div class="category">
        <h3>{{title1}}分类</h3>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        components:{},
        props:['title1'],
        data(){
            return{
                games:['崩坏三','原神','红色警戒','公主连结'],
            }
        }
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    img{
        width: 100%;

    }
</style>

报错:[Vue warn]: Property or method "games" is not defined

那这个组件的使用者怎么能得到原本放在Category里面的这个games

怎么能让App得到这个games?

插槽给我提供了一个便捷的方式去把Category里面的games传给这个使用者(App.vue)的

<slot :games="games">我是一个插槽</slot>

这么写，我把games传给了谁?

把这个games传给了插槽的使用者

<Category title1="游戏">
	<ul>
    	<li v-for="(g,index) in games" :key="index">{{l}}</li>
	</ul>
</Category>

这块你就可以收到你所传入的这个games

插槽的作用其实就是:插槽的使用者往插槽里面塞东西，但是作用域插槽，你在这写了:games="games"你让数据流逆着过去了(也就是把插槽的数据传给了插槽的使用者)

那怎么收到这个games?

要求就是你得把你传入得结构得外侧必须得包裹一个<template></template>

<Category title1="游戏">
    <template scope>
        <ul>
        	<li v-for="(g,index) in games" :key="index">{{l}}</li>
    	</ul>
    </template>
</Category>

scope:作用

<Category title1="游戏">
	<template scope="bili"><!--名字可以不一样-->
    	{{bili}}
	</template>
</Category>

收到的是:

{ "games": [ "崩坏三", "原神", "红色警戒", "公主连结" ] }

我想往插槽里面放东西，你放的东西是什么? 根据bili数据来;数据从定义插槽的这个组件(Category)里面来

这么写:

<Category title1="游戏">
    <template scope="bili">
    	<ul>
        	<li v-for="(b,index) in bili.games" :key="index">{{b}}</li>
        </ul>
	</template>
</Category>

如果你插槽里面有多个值，那你的bili里面就有俩个值

数据都是一个数据，但是结构都是使用者而定的

新的api写法:

<Category title1="游戏">
	<template slot-scope="{bili}"><!--名字可以不一样,这个新的api可以给结构赋值-->
    	{{bili}}
	</template>
</Category>