从组件封装看Vue的作用域插槽的实现


Posted in Javascript onFebruary 12, 2019

作用域插槽不是那么直观的一个概念。Vue文档使用了一段描述性的话来解释作用域插槽:

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽
……
但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。

但在我看来,至少是第一次读到的时候,这段话相当不好理解。插槽不是分发内容到子组件吗,为什么还要从子组件中获取数据?不是已经有了通过emit事件的方法从子组件向父组件传递数据吗,为什么需要它?作用域插槽到底是来干嘛的?……

在浏览了不少博客、自己思考“如果不这么做,就会怎么样”再动手实践之后,作用域插槽的含义才逐渐明了。其实作用域插槽提供了一种封装可复用组件的新思路。下面我会从最简单的例子开始。

简单的展示列表

现在我们做一个纯展示用途的列表组件,如下图所示:

从组件封装看Vue的作用域插槽的实现

第一个例子先用slot来分发内容

<template>
 <div class="list">
  <div class="list-title">
   <slot name="title"></slot>
  </div>
  <div class="list-content">
   <slot name="content"></slot>
  </div>
 </div>
</template>

<script>
 export default {
  name: "MyList"
 }
</script>

在父组件中使用MyList

<template>
 <MyList>
  <span slot="title">title</span>
  <ul slot="content">
   <li v-for="item in listData">{{item}}</li>
  </ul>
 </MyList>
</template>

<script>
 import myList from './List.vue';
 export default {
  name: 'HelloWorld',
  components: {
   'MyList': myList
  },
  data() {
   return {
    listData: [
      '列表项1',
      '列表项2',
      '列表项3'
    ]
   }
  }
 }
</script>

省略了其中的样式代码,结果如图所示

从组件封装看Vue的作用域插槽的实现

满足了基本的需求,但是作为组件的使用者,这样的一个组件会让我觉得非常麻烦,content中循环的逻辑还需要我自己动手来写,这样的使用毫无便利性。于是有了下面第二个版本

使用prop来传递数据

因为考虑到列表的内容总是一个数组,我把循环结构写进了组件中

列表组件第二版:

<template>
 <div class="list">
  <div class="list-title">{{title}}</div>
  <ul class="list-content">
   <li v-for="(item ,index) in content" :key="index">{{item}}</li>
  </ul>
 </div>
</template>

<script>
 export default {
  name: "MyList",
  props: {
   title: {
    type: String,
    required: true
   },
   content: {
    type: Array,
    required: true
   }
  }
 }
</script>

使用起来也非常方便,只需通过prop将数据传入组件中

<template>
 <div>
  <MyList title="标题1" :content="listData"></MyList>
  <MyList title="标题2" :content="newListData"></MyList>
 </div>
</template>

<script>
 import myList from './List.vue';
 export default {
  name: 'HelloWorld',
  components: {
   'MyList': myList
  },
  data() {
   return {
    listData: [
      '列表项1',
      '列表项2',
      '列表项3'
    ],
    newListData: [
      '新的列表项1',
      '新的列表项2',
      '新的列表项3'
    ],
   }
  }
 }
</script>

改进之后,每当我使用组件只需一行代码,大大简化了工作量

从组件封装看Vue的作用域插槽的实现

易用性的需求也满足了,但现在又有了新的问题,组件的拓展性不好!每次只能生成相同结构的列表,一旦业务需求发生了变化,组件就不再适用了。比如我现在有了新的需求,在一个列表的每个列表项前加入了一个小logo,我总不可能又写一个新的组件来适应需求的变化吧?假如需要更多的定制化场景呢?

作用域插槽

这里就有了第三版的列表组件,使用作用域插槽将子组件中的数据传递出去 

<template>
 <div class="list">
  <div class="list-title">{{title}}</div>
  <ul class="list-content">
   <li v-for="(item ,index) in content" :key="index">
    <!--这里将content中的每一项数据绑定到slot的item变量上,在父组件中可以获取到item变量-->
    <slot :item="item">{{item}}</slot>
   </li>
  </ul>
 </div>
</template>

使用组件时,将业务所需的content模板传入

<template>
 <div>
  <MyList title="标题1" :content="listData1"></MyList>
  <MyList title="标题2" :content="listData2">
   <template slot-scope="scope">
    <img :src="scope.item.img" width="20">
    <span>{{scope.item.text}}</span>
   </template>
  </MyList>
  <MyList title="标题3" :content="listData3">
   <template slot-scope="scope">
    <b>{{scope.item.prefix ? '有前缀' : '无前缀'}}</b>
    <span>{{scope.item.text}}</span>
    <span>{{scope.item.remark}}</span>
   </template>
  </MyList>
 </div>
</template>

<script>
 import myList from './List.vue';

 export default {
  name: 'HelloWorld',
  components: {
   'MyList': myList
  },
  data() {
   return {
    listData1: [
     '列表项1',
     '列表项2',
     '列表项3'
    ],
    listData2: [
     {text: '第二个列表的列表项1', img: 'example.png'},
     {text: '第二个列表的列表项2', img: 'example.png'},
     {text: '第二个列表的列表项3', img: 'example.png'}
    ],
    listData3: [
     {text: '第三个列表的列表项1', prefix: true, remark: '附加的备注1'},
     {text: '第三个列表的列表项2', prefix: false, remark: '附加的备注2'},
     {text: '第三个列表的列表项3', prefix: true, remark: '附加的备注3'}
    ],
   }
  }
 }
</script>

实现了定制化的列表

从组件封装看Vue的作用域插槽的实现

再回到开始的问题,作用域插槽到底是干嘛用的?很显然,它的作用就如官网所说的一样:将组件的数据暴露出去。而这么做,给了组件的使用者根据数据定制模板的机会,组件不再是写死成一种特定的结构。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 #Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 #Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 #Javascript
在微信小程序中保存网络图片
Feb 12 #Javascript
VUE中使用MUI方法
Feb 12 #Javascript
如何利用ES6进行Promise封装总结
Feb 11 #Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 #Javascript
You might like
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python双向链表实现实例代码
2013/11/21 Python
haskell实现多线程服务器实例代码
2013/11/26 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
工地安全标语
2014/06/07 职场文书
授权委托书公证
2014/09/14 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书