slot插槽使用方式和场景
一、什么是插槽
Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。
作用是:在父组件中向子组件中传递定制化的内容
作用:让父组件可以想子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件==》子组件
插槽有3中类型,分别为:默认插槽、具名插槽、作用域插槽
二、插槽详情
1.默认插槽(匿名插槽)
<!-- 父组件内容 -->
<template>
<div>
<!--子组件标签-->
<Category>
<!--子组件标签体内容,也就是需要插入的内容-->
<img src="https://i.postimg.cc/Gtjx71ZX/image.jpg" alt="">
</Category>
</div>
</template>
<!-- 子组件内容 -->
<template>
<div>
<h3>{{title}}分类</h3>
<!-- 在<slot>标签位置显示插入的内容-->
<slot></slot>
</div>
</template>
2.具名插槽
<!-- 父组件内容 -->
<category>
<template slot="center"> <!-- 写法1 -->
<div>html结构1</div>
</template>
<template v-slot:footer> <!-- 写法2 -->
<div>html结构2</div>
</template>
</category>
<!-- 子组件内容 -->
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
3.作用域插槽
<!-- 父组件内容 -->
<category>
<template scope="scopeData"> <!-- 写法1 -->
<ul>
<li v-for="(item,index) in scopeData.dataName" :key="index">{{item}}</li>
</ul>
</template>
<template slot-scope="scopeData"> <!-- 写法2 -->
<ul>
<li v-for="(item,index) in scopeData.dataName" :key="index">{{item}}</li>
</ul>
</template>
</category>
<!-- 子组件内容 -->
<template>
<div>
<!-- 定义插槽 -->
<slot :Data="dataName">插槽默认内容...</slot>
</div>
</template>
<script>
export default {
data() {
return {
dataName: [....],
};
},
};
</script>
解析:数据在组件的自身,但根据数据生成的结构需要组件的使用者来觉得
三、总结
- 通过插槽可以让用户拓展组件,去更让的复用组件和对其做定制化处理
- 如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件就有违组件复用原则,这时就需要使用插槽来定制不同的内容来实现不同的功能
- 通过slot插槽想组件内部指定位置传递内容,完成这个复用组件在不同场景的应用
- 比如布局组件、表格列、下拉选、弹框显示内容等