一. 什么是slot?
在Vue中,slot 是一种用于在组件之间进行内容分发的机制。它允许我们在组件的模板中定义具有特定名称的插槽,并在组件的使用者中填充相应的内容。
二. 使用场景
-
通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理
-
如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件是一件不明智的事情
-
通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用
三.分类
1. 默认插槽
就是该插槽没有名字,父组件在使用的时候,直接在子组件的标签里写入内容就行。
子组件 child.vue
javascript
<template>
<div>
<slot>父组件想展示的内容写在这里边</slot>
</div>
</template>
父组件 father.vue
javascript
<template>
<div>
<Child>
<p>Custom Content</p>
</Child>
<Child></Child>
</div>
</template>
<script>
import Child from '../components/child'
export default {
name:'Father',
components:{Child}
}
</script>
2. 具名插槽
子组件用name属性来表示插槽的名字,不传为默认插槽
子组件 child.vue
javascript
<template>
<form >
<div class="auth">
<slot>插槽后备的内容</slot>
<slot name="content">插槽后备的内容</slot>
</div>
</form>
</template>
父组件 father.vue
javascript
<child>
<template v-slot:default></template>
<template #content></template>
</child>
3. 作用域插槽
子组件 child.vue
javascript
<div>
<!-- 设置默认值:{{person.name}}获取 baijing -->
<!-- 如果father.vue中给这个插槽值的话,则不显示 baijing -->
<!-- 设置一个 usertext 然后把person绑到设置的 usertext 上 -->
<slot v-bind:usertext="person">{{person.name}}</slot>
</div>
//定义内容
data(){
return{
person:{
name:"baijing",
age: 20
}
}
}
父组件 father.vue
javascript
<div>
<test v-slot:default="slotProps">
{{slotProps.usertext.age}}
</test>
</div>
绑定在 元素上的特性被称为插槽 prop。在父组件中,我们可以用 v-slot 设置一个值来定义我们提供的插槽 prop 的名字,然后直接使用就好了