这里写目录标题
一、什么是插槽1、作用2、语法3、配置项4、注意项4、插槽分类 二、默认插槽与具名插槽案例三、作用域插槽案例四、总结
一、什么是插槽
1、作用
组件间的一种通信方式。让父组件可以向子组件指定位置插入html结果
2、语法
<slot></slot>
元素作为组件模板之中的内容分发插槽。 元素自身内容将被替换。
3、配置项
name：用于命名插槽。
4、注意项
在2.6.0中，Vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope语法
4、插槽分类
默认插槽
具名插槽
作用域插槽
二、默认插槽与具名插槽案例
需求：通过app组件向category组件传递html结构
App组件代码
<template> <div id="app"> <Category title="美食"> <ul v-for="(li,index) in foods" :key="index"> <li>{{li}}</li> </ul> <!-- 具名插槽 --> <h4 slot="others">秀色可餐</h4> </Category> <Category title="汽车"> <ul v-for="(li,index) in cars" :key="index"> <li>{{li}}</li> </ul> <h4 slot="others">好车好景</h4> </Category> </div></template><script>import Category from "./components/Category.vue";export default { name: 'App', components:{Category}, data () { return { foods:["苹果","香蕉","桃子"], cars:["奥迪","宝马","奔驰"], } }}</script><style>#app { display: flex; justify-content: space-between;}img { width: 150px;}h4 { color: red;}</style>category组件代码
<template> <div class="category"> <h3>{{this.title}}分类</h3> <slot>我是默认插槽</slot> <slot name="others">我是具名插槽</slot> </div></template><script>export default { name:"Category", props:["title"]}</script><style> .category { width: 200px; height: 300px; background-color: rgb(236, 219, 231); } h3 { text-align: center; }</style>运行结果
注意点：
1、<slot></slot>标签内为后备内容，只会在没有提供内容的时候被渲染
2、样式写在父组件时，在父组件中解析完模板和样式之后再传入子组件
三、作用域插槽案例
需求：根据category组件提供的数据，在App组件中展示不同的样式
理解：数据在子组件，但渲染的样式需要父组件决定
App组件代码
<template> <div id="app"> <Category title="无序列表"> <template scope="scopeData"> <ul> <li v-for="(cat,index) in scopeData.cats" :key="index">{{cat}}</li> </ul> </template> </Category> <Category title="有序列表"> <template scope="scopeData"> <ol> <li v-for="(cat,index) in scopeData.cats" :key="index">{{cat}}</li> </ol> </template> </Category> <Category title="H5列表"> <template scope="scopeData"> <h5 v-for="(cat,index) in scopeData.cats" :key="index">{{cat}}</h5> </template> </Category> </div></template><script>import Category from "./components/Category.vue";export default { name: 'App', components:{Category},}</script><style>#app { display: flex; justify-content: space-between;}img { width: 150px;}h4 { color: red;}</style>Ctegory组件代码
```html<template> <div class="category"> <h3>{{title}}</h3> <slot :cats="cats">默认内容</slot> </div></template><script>export default { name:"Category", props:["title"], data () { return { cats:["小猫","小狗","兔子"] } },}</script><style> .category { width: 200px; height: 200px; background-color: rgb(236, 219, 231); } h3 { text-align: center; }</style>运行结果
注意点：
1、在2.5.0版本中，scope被新增的 slot-scope 取代，在2.6.0版本中，slot-scope又被v-slot取代
2、 v-slot 只能添加在<template>上 (只有一种例外情况)。
四、总结
1、插槽的本质：组件间通信的一种方式
2、作用是为了实现父组件可以向子组件指定位置插入html结构。
3、具名插槽：带有名字的插槽（带有name属性）
4、作用域插槽：有作用域限制的插槽，作用域插槽可以用来实现数据在子组件中，但是最终渲染的效果需要父组件来决定的情况