Vue.js插槽的使用详解

Vue.js插槽的使用

我们在使用vue开发项目的时候,很重要的一点优化就是代码如何能复用,能模块化,同一个东西不用到处复制粘贴,以一个demo为例,假如我们要实现如下需求:
Vue.js插槽的使用详解_第1张图片
拿到页面,我们可以知道,这个页面有几部分都是可以抽成组件的,比如单个item:
Vue.js插槽的使用详解_第2张图片
这个时候有一个问题,就是我们每次列表的item需要显示的内容不一样,这时候,我们就可以用到vue的插槽了
例如:
Vue.js插槽的使用详解_第3张图片
这三部分内容,我们可以分别在对应的布局位置放入具名插槽,这样我们在用这个组件的时候,动态的去插入要显示的内容,这样用起来比较活
例如:子组件

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

父组件

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

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

Vue.js插槽的使用详解_第4张图片
扫码关注公众号,一起学习更多前端实用知识

你可能感兴趣的:(前端,vue.js,javascript,html5,css3,es6)