第八节：插槽简介及基本用法、剖析具名插槽、作用域插槽的使用
一. 简介及基本用法
1. 简介
(1). 什么时候使用插槽？
插槽的使用过程其实是抽取共性、预留不同；
我们会将共同的元素、内容依然在组件内进行封装；
同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素；
(2). 如何定义插槽？
在封装组件中，使用特殊的元素<slot>就可以为封装组件开启一个插槽；
该插槽插入什么内容取决于父组件如何使用；
2. 基本使用 (匿名插槽)
(1). 基本用法
(2). 插槽默认内容
有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容：当然这个默认的内容只会在没有提供插入的内容时，才会显示。
子组件
<template> <div> <h4>-------------我是MySlot1开始部分------------</h4> <slot> <h6 class="h6">我是插槽默认的内容哦,如果不填充，就显示我</h6> </slot> <h4>-------------我是MySlot1结束部分------------</h4> </div> </template>
父组件
<template> <div> <my-slot1> <!-- <h4>我是填充内容1</h4> <a href="#">我是填充内容2</a> <h4>我是填充内容3</h4> --> </my-slot1> </div> </template>
二. 具名插槽
1. 背景
我们希望达到一个插槽对应一块内容的显示，这个时候我们就可以使用 具名插槽。
2. 基本用法
具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的 attribute：name属性；一个不带 name 的slot，会带有隐含的名字 default；
父组件在调用的时候，可以使用 v-slot 绑定名称从而实现对应，v-slot也可以缩写为 #。
子组件
<template> <div class="nav-bar"> <!-- <slot name="default"></slot> --> <div class="left"> <slot name="left1"></slot> </div> <div class="center"> <slot name="center1"></slot> </div> <div class="right"> <slot name="right1"></slot> </div> </div> </template>
父组件
<template> <div> <my-slot-cpn1> <template v-slot:left1> <button>左边按钮</button> </template> <template #center1> <button>我是中间按钮</button> </template> <template #right1> <button>右边按钮</button> </template> </my-slot-cpn1> </div> </template>
3. 动态插槽名
可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称。
子组件
<template> <div class="nav-bar"> <div class="addition"> <slot :name="name"></slot> </div> </div> </template> <script> export default { data() { return { name:'ypf' }; } } </script>
父组件
<template> <div> <my-slot-cpn1> <template #[name]> <button>ypf内容</button> </template> </my-slot-cpn1> </div> </template> <script> import MySlotCpn1 from './MySlotCpn1.vue'; export default { components: { MySlotCpn1 }, data() { return { name:'ypf' }; } } </script>
三. 作用域插槽
1. 背景
我们希望父组件中 插槽位置 可以访问到子组件中的内容。默认情况下，如下图，是无法访问的。
2. 如何解决？
(1). 插槽 prop (子组件)
通过绑定在 <slot> 元素上的 attribute 向外传递，这个attribute被称为插槽 prop。
<template> <div> <template v-for="(item,index) in myList" :key="index"> <slot :item="item" :index="index">{{index}}</slot> </template> </div> </template> <script> export default { props: { myList: { type: Array, default: () => [] } }, data() { return {}; } } </script>
(2). 父组件中，可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字，从而获取插糟中的属性。
代码分享：省略部分不关键代码
<template> <div> <!-- 2. 作用域插槽--> <!-- 2.1 通过v-slot:default声明调用 --> <show-names2 :myList="myList"> <template v-slot:default="myInfo"> <button>{{myInfo.item}}----{{myInfo.index}}</button> </template> </show-names2> <!-- 2.2 独占默认插槽的缩写语法 省略template --> <show-names2 :myList="myList"> <template v-slot="myInfo"> <button>{{myInfo.item}}----{{myInfo.index}}</button> </template> </show-names2> <!-- 2.3 可以直接加在组件上 --> <show-names2 :myList="myList" v-slot="myInfo"> <button>{{myInfo.item}}----{{myInfo.index}}</button> </show-names2> </div> </template> <script> export default { data() { return { myList: ["ypf1", "ypf2", "ypf3", "ypf4"], }; } } </script>
3. 独占默认插槽缩写
(1). 如果我们的插槽是默认插槽default，那么在使用的时候 v-slot:default="myInfo"可以简写为v-slot="myInfo"：
(2). 并且如果我们的插槽只有默认插槽时，组件的标签可以被当做插槽的模板来使用，这样，我们就可以将 v-slot 直接用在组件上：
<template> <div> <!-- 2. 作用域插槽--> <!-- 2.2 独占默认插槽的缩写语法 省略template --> <show-names2 :myList="myList"> <template v-slot="myInfo"> <button>{{myInfo.item}}----{{myInfo.index}}</button> </template> </show-names2> <!-- 2.3 可以直接加在组件上 --> <show-names2 :myList="myList" v-slot="myInfo"> <button>{{myInfo.item}}----{{myInfo.index}}</button> </show-names2> </div> </template> <script> export default { data() { return { myList: ["ypf1", "ypf2", "ypf3", "ypf4"], }; } } </script>
4. 默认插槽和具名插槽混合
如果我们有默认插槽和具名插槽，那么按照完整的template来编写。
子组件：
<template> <div> <template v-for="(item,index) in myList" :key="index"> <!-- 插槽prop --> <slot :item="item" :index="index">{{index}}</slot> <!-- 具名插糟 --> <slot name="ypf"></slot> </template> </div> </template>
父组件：
<!-- 3. 多个插槽需要使用完整的template--> <show-names3 :myList="myList"> <template v-slot="myInfo"> <button>{{myInfo.item}}-{{myInfo.index}}</button> </template> <!-- 具名插糟 --> <template v-slot:ypf> <h2>我是ypf的插入内容</h2> </template> </show-names3>
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
