Vue学习---插槽篇

Vue插槽

1. 初步了解插槽
2. 插槽的分类
- 2.1 默认插槽
- 2.2 具名插槽
- 2.3 作用域插槽

1. 初步了解插槽

什么是插槽？

插槽就是子组件提供给父组件使用的一个占位符，可以通俗理解为“占坑作用”。有了该占位符，父组件可以在该占位符中填充任何模板，不仅限于传递数据，也可以填充如HTML、组件、template模板、标签等。填充后，内容替换子组件的标签

为什么要使用插槽？
在组件通信中（详情见文章:Vue组件学习、组件通信），我们了解到组件之间如何传递数据。那父组件在复用子组件的时候除了想给子组件传递数据，还想更改子组件的内容和样式时，怎么办呢？
一般来说，父组件是没办法更改子组件的内容和样式的，总结就是“你可以用我但是不可以更改我”。
就像买车一样不能自己去决定车的配置、外观、性能、尺寸，这些都是厂家自己设计好然后批量生产的，大家买下都是一样的。

如果你真的想更改子组件，那就使用插槽。
插槽的作用就是使得父组件可以改造子组件，让父组件提供内容，在子组件中展示

使用场景：

使用插槽让用户拓展组件，更好地复用组件和对其做定制化处理。

当一个子组件被父组件复用时，或许在不同情况下需要被更改，此时如果去重写组件是一件不明智的事情，此时通过slot插槽向子组件内部指定位置传递内容，是一个更好的选择。

在布局组件、表格列、下拉框、弹框显示内容中常用。

插槽的作用：
让父组件向子组件指定位置插入html结构，也是一种组件间的通信方式。

2. 插槽的分类

2.1 默认插槽

案例场景：以下是一个组件的复用（一个蓝色的div即是一个组件），该组件在页面中复用了3次，我想对某一个组件实现私人定制，比如，美食组件我只想放一张图片，电影组件中我想放一个视频，如何做？

由上方效果变成下面这样的：

制定子组件Category.vue：
这是没有使用插槽的情况，组件不能实现定制化：

<template><div class="category"><h3>{{title}}</h3>    <ul><li v-for="(item,index) in listData" :key="index">{{item}}</li></ul></div>
</template>
<script>export default{name:"Category",// 接收父组件传过来的值props:['listData','title']}
</script>
<style>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}
</style>

在App.vue中使用Category.vue：

<template><div id="app"><!-- 复用子组件 静态传输标题，动态传输数组--><Category title="美食" :listData="foods" /><Category title="书籍" :listData="books"/><Category title="电影" :listData="films"/></div>
</template><script scope="this api replaced by slot-scope in 2.5.0+">
import Category from './components/Category.vue';
export default {name: 'App',components: {Category,},data(){return{// 定义数据foods:['火锅','重庆火锅','小龙虾','牛排'],books:['语文','数学','英语','化学'],films:['重庆森林','七龙珠','犬夜叉','心灵捕手'],}}
}
</script><style>
#app {display: flex;justify-content: space-around;
}
</style>

以上复用只能出现第一个页面效果，见下图：

如果不使用作用域插槽，仅在App.vue更改组件中内容，子组件是不会将内容渲染的
在App.vue中更改子组件内容，此时子组件中无插槽！！！：

   <Category title="美食" ><img src="@/assets/hotpot.jpg" alt=""></Category><Category title="书籍" :listData="books"/><Category title="电影" :listData="films"/>

子组件无法渲染在父组件中更改的页面结构，如下图：

下面使用默认插槽：
在子组件Category.vue中定义一个默认插槽：

<template><div class="category"><h3>{{title}}</h3><!-- 定义一个插槽 组件的页面结构完全交给父组件去定义--><slot>默认值，当父组件没有出现时，我会出现</slot></div>
</template>
<script>export default{name:"Category",// 接收父组件传过来的值props:['title']}
</script>
<style>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}
</style>

App.vue:

<template><div id="app"><!-- 复用子组件 静态传输标题，动态传输数据 --><Category title="美食" ><img src="@/assets/hotpot.jpg" alt=""></Category><!-- <Category title="书籍" :listData="books"/> --><Category title="书籍"><ul><li v-for="(item,index) in books" :key="index">{{item}}</li></ul></Category><!-- <Category title="电影" :listData="films"/> --><Category title="电影"><video src="@/assets/1.mp4" controls></video></Category></div>
</template><script scope="this api replaced by slot-scope in 2.5.0+">
import Category from './components/Category.vue';
export default {name: 'App',components: {Category,},data(){return{// 定义数据foods:['火锅','重庆火锅','小龙虾','牛排'],books:['语文','数学','英语','化学'],films:['重庆森林','七龙珠','犬夜叉','心灵捕手'],}}
}
</script><style>
#app {display: flex;justify-content: space-around;
}
img{width: 100%;
}
video{width: 100%;
}
</style>

注意：对样式的定义,可以定义在父组件也可以定义在子组件。
区别：

定义在父组件，结构先编译好样式再传给子组件；
定义在子组件中，结构传给子组件，再由子组件编译。

<style>
img{width: 100%;
}
video{width: 100%;
}
</style>

2.2 具名插槽

上诉案例中，提高需求，我想在分割线下添加一个跳转链接（分割线以上的都是默认插槽区域），如何做？

使用默认插槽和使用作用域插槽的区别：

具名插槽就是把父组件想要更改的元素插在子组件的某个位置上，并且只接受对应名字的更改元素，而默认插槽则会把父组件的更改元素全盘接收。
使用vue2.6的新语法时，建议使用template模板包裹元素

Category.vue

<template><div class="category"><h3>{{title}}</h3><!-- 定义一个插槽 --><slot>默认值，当父组件没有出现时，我会出现</slot>-------------------------<!-- 声明一个具名插槽 --><slot name="link"></slot><!-- <ul><li v-for="(item,index) in listData" :key="index">{{item}}</li></ul> --></div>
</template>

App.vue

<template><div id="app"><!-- 复用子组件 静态传输标题，动态传输数据 --><Category title="美食" ><img src="@/assets/hotpot.jpg" alt=""><!-- 将元素插入指定名字插槽内 --><!-- vue对具名插槽的新写法 简写形式:#插槽名 --><template ><div class="foot"><a href="">更多美食</a></div></template></Category><!-- <Category title="书籍" :listData="books"/> --><Category title="书籍"><ul><li v-for="(item,index) in books" :key="index">{{item}}</li></ul><!-- 将元素插入指定名字插槽内 --><!-- 传统用法：slot="插槽名" --><div class="foot" slot="link" ><a href="https://www.taobao.com/" >去淘宝</a><a href="https://www.taobao.com/" >去京东</a></div><br><!--<a href="https://www.taobao.com/">去淘宝</a><br><a href="https://www.taobao.com/">去淘宝</a> --></Category><!-- <Category title="电影" :listData="films"/> --><Category title="电影"><video src="@/assets/1.mp4" controls></video><!-- 将元素插入指定名字插槽内--><!-- vue对具名插槽的新写法，v-slot:插槽名--><template v-slot:link><div class="foot"><a href="">经典</a><a href="">热门</a><a href="">推荐</a></div><h4>欢迎前来观影</h4></template></Category></div>
</template><script scope="this api replaced by slot-scope in 2.5.0+">
import Category from './components/Category.vue';
export default {name: 'App',components: {Category,},data(){return{// 定义数据foods:['火锅','重庆火锅','小龙虾','牛排'],books:['语文','数学','英语','化学'],films:['重庆森林','七龙珠','犬夜叉','心灵捕手'],}}
}
</script><style >
#app,.foot{display: flex;justify-content: space-around;
}
img{width: 100%;
}
video{width: 100%;
}
h4{text-align: center;
}
</style>

2.3 作用域插槽

理解： 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。
案例：

父组件：

<Category title="游戏">
<!-- 一定要使用template模板编译 --><template scope="row"><!-- {{row.games}} --><ul><li v-for="(g, index) in row.games" :key="index">{{ g }}</li></ul></template></Category><Category title="游戏"><!-- 一定要使用template模板编译 --><template scope="row"><ol><li style="color: red" v-for="(g, index) in row.games" :key="index">{{ g }}</li></ol></template></Category><Category title="游戏"><!-- 一定要使用template模板编译 --><template scope="row"><h4 v-for="(g, index) in row.games" :key="index">{{ g }}</h4></template></Category>

子组件中：

   <h3>{{title}}分类</h3><!-- 定义一个作用域插槽 --><slot :games='games'>默认内容</slot><script>export default {props: ['title'],data() {return {games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽']}}}
</script>

作用域插槽可以看成数据的方向流动，有子组件传给父组件
注意：作用域插槽的使用一定要使用template模板