从组件封装看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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
Vue父子传递实例讲解
Feb 14 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
2019十大人气国漫
2020/03/13 国漫
配置支持SSI
2006/11/25 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
js停止输出代码
2008/07/20 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
PHP PDO操作总结
2014/11/17 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python中有关时间日期格式转换问题
2019/12/25 Python
pytorch forward两个参数实例
2020/01/17 Python
Python 多进程、多线程效率对比
2020/11/19 Python
python爬取招聘要求等信息实例
2020/11/20 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
关键字final的用法
2013/10/02 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android