玩转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 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
解析PHP提交后跳转
2013/06/23 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
js实现缓动动画
2020/11/25 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
使用python实现kNN分类算法
2019/10/16 Python
python实现文法左递归的消除方法
2020/05/22 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers