玩转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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
深入php self与$this的详解
2013/06/08 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php生成短域名函数
2015/03/23 PHP
PHP实现递归无限级分类
2015/10/22 PHP
关于php开启错误提示的总结
2019/09/24 PHP
js类 from qq
2006/11/13 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
什么是封装
2013/03/26 面试题
保密承诺书范文
2014/03/27 职场文书
三方协议书范本
2014/04/22 职场文书
班子四风对照检查材料
2014/08/21 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
国家助学金感谢信
2015/01/21 职场文书
三下乡个人总结
2015/03/04 职场文书
山楂树之恋观后感
2015/06/11 职场文书
导游词之天津盘山
2019/11/01 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python