从组件封装看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 使用手册(三)
Sep 23 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
用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新手上路(十四)
2006/10/09 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
在微信小程序中保存网络图片
2019/02/12 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python读文件逐行处理的示例代码分享
2013/12/27 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python 图片去噪的方法示例
2019/07/09 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
客服主管岗位职责
2013/12/13 职场文书
合同意向书范本
2014/07/30 职场文书
运动会演讲稿50字
2014/08/25 职场文书
2014年团委工作总结
2014/11/13 职场文书
运动会运动员赞词
2015/07/22 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS