玩转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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
cypress测试本地web应用
Jun 01 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 分页分组类
2009/12/10 PHP
php Calender(日历)代码分享
2014/01/03 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
基于js中this和event 的区别(详解)
2017/10/24 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
Python 可爱的大小写
2008/09/06 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python文件拆分与重组实例
2018/12/10 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
银行演讲稿范文
2014/01/03 职场文书
大一军训感言
2014/01/09 职场文书
学校安全工作制度
2014/01/19 职场文书
应聘面试自我评价
2014/01/24 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
农村党员对照检查材料
2014/09/24 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
导游词之无锡梅园
2019/11/28 职场文书