玩转vue的slot内容分发


Posted in Javascript onSeptember 22, 2018

vue的内容分发非常适合“固定部分+动态部分”的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会触发拉取更多内容的操作,因此我们可以把下拉loading做成一个有slot的插件。

单个Slot

在children这个标签里面放Dom,Vue不会理你,也就是不会显示,类似React:this.props.children。

//父
<children> 
  <span>12345</span>//这边不会显示
</children>

//子
components: {
  children: {
    template: "<button>为了明确作用范围,所以使用button标签</button>"
  }
}

你需要写成这样

children: {
  template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>" 
}

注意这边 slot 相当于一个坑,等着父组件给填上,这边 slot 代表的就是上面的 span

多个Slot

这边需要加name属性,说白了,多个Slot就不像上面单个,需要有个对应关系。

父-> slot="name1"
子-> <slot name="name1"

//父
<children> 
  <span slot="name1">12345</span>
</children>

//子
components: {
  children: {
    template: "<button>
            <slot name="name1"></slot>
            button标签
          </button>"
  }
}

这边写了一个name1,如果有多个,就插多个,比较简单。

使用场景

“下拉加载更多”的场景在移动端相对来说出现得比较多。我们知道下拉触底都要监听触底事件,触底的操作也相同(去后台拉取数据),分页算法也相同,因此我们会想到把它做成一个组件,重用这些相同的地方,让其他地方可以共用这个组件,从而减少代码量。

然而,下拉loading并不是一个可以完全重用的组件,因为列表里面的内容不同,空白页(没有内容时)的内容也可能不同,如果要做成组件,那么就要考虑到这方面的“不同”,因此我们想到利用vue的内容分发slot来做。下面是本人在开发的时候做的一个下拉loading,大家可以参考下。

组件代码:

<template>
 <div>
  <slot name="list" v-if="total > 0"></slot>
  <slot name="empty" v-else></slot>
 </div>
</template>
<script>
import Toast from 'lib/xl-toast'

import Tool from 'tool/tool'

export default {
 data() {
  return {
   page: 1,
   isLoading: false,
   busy: false,
   isFirstLoad: false
  }
 },
 props: {
  pageSize: {
   default: 10 // 每页展示多少条数据
  },
  total: {
   default: 0 // 总共多少条记录
  }
 },
 computed: {
  totalPage() {
   return Math.ceil(this.total / this.pageSize)
  }
 },
 created() {
  this.getList()
 },
 mounted() {
  this.addScrollListener()
 },
 methods: {
  addScrollListener() {
   // 添加监听滚动操作,用到函数防抖
   this.scrollFn = Tool.throttle(this.onScroll, 30, 30)
   document.addEventListener('scroll', this.scrollFn, false)
  },
  getList() {
   // 正在拉取数据或者没有数据了,则取消滚动监听
   if(this.isLoading || this.isFirstLoad && (this.page > this.totalPage)) {
    document.removeEventListener('scroll', this.scrollFn, false)
    return
   }
   this.busy = true
   this.isLoading = true
   // 通知父组件去拉取更多数据
   this.$emit("getList", this.page, () => {
    this.isFirstLoad = true
    this.isLoading = false
    this.page++
   }, () => {
    Toast.show('网络错误,请稍后重试')
    this.total = 0
    this.isLoading = false
   })
  },
  reset() {
   // 重新拉取数据
   this.page = 1
   this.total = 0
   this.isLoading = false
   this.isFirstLoad = false
   this.addScrollListener()
   this.getList()
  },
  onScroll() {
   // 到底拉取更多数据 
   if(Tool.touchBottom()) {
    this.getList()
   }
  }
 }
}
</script>

总之,遇到一些有想对比较固定的部分,包括js操作或者结构固定,又有一些动态的部分,我们应该就应该考虑到使用:组件+slot。

意向不到的slot另类用法

我在做需求的时候,做了一个组件,该组件分为上下两个部分,这两个部分耦合度很高(不然我怎么把它当成一个组件呢哈哈哈),如下图所示:

玩转vue的slot内容分发

本来C区域是一个组件,然后产品突然说,需要把这两个部分分开,把A移到C1的位置,C1移到A的位置(心里感觉到憋屈)。

这里我的第一个想法就是拆开来做成两个组件,但是问题来了,之前这两部分的耦合度很高,如果强制把它拆开成两个组件,那么这两个组件之间的交互必然会多很多。比如,C1改变了某个东西会影响到C2,那么C1需要触发事件通知父组件,父组件再调用C2的某个方法来更新状态。这种跨组件之间的通讯在组件之间频繁交互的情况下,将会是噩梦,而我这边却需要频繁的交互,所以如果把它拆分为两个组件,那么工作量和复杂度将会大大的增加。当然,你可以想到通过Event Hub的方式来实现两个组件之间的交互,但是根本问题还是没有实质性得得到解决。

那么,有什么方法可以做到不拆分成两个组件又能移动位置的方法呢,答案就是slot。以我的例子为例,把A和B作为C的内容分发,原来是这样的:

<A></A>
<B></B>
<C></C>

改为slot以后是这样的

<C>
<A slot="c1"></A>
<B slot="c2"></B>
</C>

这样就能做到不把C模块拆分,又能调整位置了,以最小的代价完成需求~~。

总结

vue的slot不仅可以用来内容分发,还可以用来做位置调整。如果在需要拆分组件来做位置调整,又不想因为拆分耦合度很高的组件,可以考虑使用slot来进行位置调整。一点愚见,希望对大家有所帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
vue 巧用过渡效果(小结)
Sep 22 #Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 #Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 #Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 #Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 #Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 #Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 #Javascript
You might like
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
js 判断 enter 事件
2009/02/12 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 快速排序代码
2009/11/23 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python实现三维拟合的方法
2018/12/29 Python
java判断三位数的实例讲解
2019/06/10 Python
通过实例解析python描述符原理作用
2020/01/22 Python
瑞典度假品牌:OAS
2019/05/28 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
升职自荐信
2013/11/28 职场文书
运动会通讯稿200字
2014/02/16 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
求职自我评价怎么写
2015/03/09 职场文书
公司考勤管理制度
2015/08/04 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Python中相见恨晚的技巧
2021/04/13 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
在Docker容器中部署SQL Server
2022/04/11 Servers