Vue.js插槽的使用详解

Vue.js插槽的使用

我们在使用vue开发项目的时候，很重要的一点优化就是代码如何能复用，能模块化，同一个东西不用到处复制粘贴，以一个demo为例，假如我们要实现如下需求：

拿到页面，我们可以知道，这个页面有几部分都是可以抽成组件的，比如单个item:

这个时候有一个问题，就是我们每次列表的item需要显示的内容不一样，这时候，我们就可以用到vue的插槽了
例如：

这三部分内容，我们可以分别在对应的布局位置放入具名插槽，这样我们在用这个组件的时候，动态的去插入要显示的内容，这样用起来比较活
例如：子组件

<div>
	<slot name="rightbtn"></slot>
</div>

父组件

<template v-slot:rightbtn>
	<div>
          内容
    </div>
</template>

这样，同一个结构的组件可以在多个页面重复使用，提高了代码的复用性，可读性

扫码关注公众号，一起学习更多前端实用知识