slot 基本使用
在子组件中, 使用特殊的元素 < slot > 就可以为子组件开启一个插槽.
该插槽插入什么内容取决于父组件如何使用.
我们通过一个简单的例子, 来给子组件定义一个插槽:
<slot > 中的内容表示, 如果没有在该组件中插入任何其他内容, 就默认显示该内容
有了这个插槽后, 父组件如何使用呢?
slot1.PNG
具名插槽 slot
当子组件的功能复杂时, 子组件的插槽可能并非是一个.
比如我们封装一个导航栏的子组件, 可能就需要三个插槽, 分别代表左边, 中间, 右边.
那么, 外面在给插槽插入内容时, 如何区分插入的是哪一个呢?
这个时候, 我们就需要给插槽起一个名字
如何使用具名插槽呢?
非常简单, 只要给 slot 元素一个 name 属性即可
<slot name='myslot'></slot>
我们来给出一个案例:
slot2.PNG
作用域插槽:
我们先提一个需求:
子组件中包括一组数据, 比如: pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示:
某些界面是以水平方向一一展示的,
某些界面是以列表形式展示的,
某些界面直接展示一个数组
内容在子组件, 希望父组件告诉我们如何展示, 怎么办呢?
利用 slot 作用域插槽就可以了
我们来看看子组件的定义:
slot3.PNG
作用域插槽: 使用
在父组件使用我们的子组件时, 从子组件中拿到数据:
我们通过 < template slot-scope="slotProps"> 获取到 slotProps 属性
在通过 slotProps.data 就可以获取到刚才我们传入的 data 了
slot4.PNG
v-slot
在 2.6.0 中, 我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令). 它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute. 新语法的由来可查阅这份 RFC.---vue.js 官网
v-slot 具名插槽使用
子组件中
- <slot name="left"> 我是一个插槽默认内容 </slot>
- <slot name="center"> 我是二个插槽默认内容 </slot>
- <slot name="right"> 我是三个插槽默认内容 </slot>
- <slot > 我是四个插槽默认内容 </slot>
父组件使用
插槽的名字现在通过 v-slot:slotName 这种形式来使用
- <template v-slot:left>
- <p>111</p>
- </template>
- <template v-slot:center>
- <p>222</p>
- </template>
- <template v-slot:right>
- <p>333</p>
- </template>
- <template>
- <p>444</p>
- </template>
注意
没有名字的 <slot> 隐含有一个 "default" 名称
v-slot 只能添加到 <template> 或自定义组件上, 这点与弃用的 slot 属性不同
v-slot 作用域插槽
子组件
- <slot name="left"> 我是一个插槽默认内容 </slot>
- <slot name="center"> 我是二个插槽默认内容 </slot>
- <slot name="right" :data="sss"> 我是三个插槽默认内容 </slot>
- <slot > 我是四个插槽默认内容 </slot>
- <script>
- export default {
- data () {
- return {
- sss:['111','222','333','444']
- }
- }
- }
- </script>
父组件使用
- <template v-slot:left>
- <p>111</p>
- </template>
- <template v-slot:center>
- <p>222</p>
- </template>
- <template v-slot:right="data1">
- <ul>
- <li v-for="(item,index) in data1.data" :key="index">
- {{item}}
- </li>
- </ul>
- </template>
- <template>
- <p>444</p>
- </template>
效果展示
slot5.PNG
来源: http://www.jianshu.com/p/be25c158ea16