VUE-插槽slot
Posted 长不大的大灰狼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE-插槽slot相关的知识，希望对你有一定的参考价值。
VUE-插槽slot
一、概述
Vue 实现了一套内容分发的 API，即：将<slot></slot>元素作为承载分发内容的出口。
插槽作用： 父组件标签内插入任意内容,子组件内控制摆放位置。
插槽分类:
- 匿名插槽: 没有命名,有且只有一个
- 具名插槽: slot标签带name命名的
- 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件的问题)
二、插槽的使用
1、匿名插槽
- 匿名插槽只有一个
- 一个不带 name 的
<slot>出口会带有隐含的名字default - 父组件调用带有插槽的子组件，并传入值给子组件，替代子组件的默认值
<slot>默认值</slot>
2、具名插槽
- slot 有name属性，可以有多个具名插槽
- 在父组件使用插槽时，任何没有被包裹在带有v-slot 中的内容都会被视为默认插槽的内容
定义子组件base-layout.vue
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件使用插槽：
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以v-slot的参数的形式提供其名称：
<base-layout>
<template v-slot:header>
<h1>我是头部header</h1>
</template>
<p>未指定的内容默认归结为匿名插槽内容</p>
<template v-slot:footer>
<p>我是尾部footer</p>
</template>
</base-layout>
注意：
- v-slot 只能添加在父组件的
<template>上 - 匿名插槽的默认名称：
v-slot:default，也可以不写 - 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot指令)。它取代了slot 和
slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。
3、作用域插槽
（1）基本概念
- 父级模板里的所有内容都是在父级作用域中编译的；
- 子模板里的所有内容都是在子作用域中编译的。
- 作用域插槽让父组件能够访问子组件中才有的数据。
子组件：
<slot name="todo" :user="user" :test="test">
user.lastName
</slot>
data()
return
user:
lastName:"张",
firstName:"三"
,
test:[1,2,3,4]
,
说明：
插槽中的 user.lastName 是默认数据，当父组件有内容后，会覆盖此处
父组件：
<todo-list>
<template v-slot:todo="slotProps" >
slotProps.user.firstName
</template>
</todo-list>
说明：
- slotProps 可以随意命名
- slotProps 接取的是子组件标签slot上属性数据的集合所有
v-bind:user="user"
（2）解构插槽Prop
当子组件插槽含有多个参数时，可以对插槽参数进行解构
父组件
<todo-list>
<template v-slot:todo="user,test" >
test
</template>
</todo-list>
子组件
<slot name="todo" :user="user" :test="test">
user.lastName
</slot>
data()
return
user:
lastName:"Zhang",
firstName:"yue"
,
test:[1,2,3,4]
（3）独占默认插槽
当子组件是 “独占默认插槽（子组件只含有默认插槽）” 时，组件的标签可以被当作插槽的模板（template）来使用。
父组件：
<todo-list v-slot:default="slotProps" >
slotProps.user.firstName
</todo-list>
子组件：
<slot :user="user" :test="test">
user.lastName
</slot>
data()
return
user:
lastName:"Zhang",
firstName:"yue"
,
test:[1,2,3,4]
注意：
- v-slot 的缩写形式为为字符
#。v-slot:header可以被重写为#header
参考文章：
[1] 【Vue】vue2.6插槽slot使用详解（更新v-slot用法总结）
以上是关于VUE-插槽slot的主要内容，如果未能解决你的问题，请参考以下文章