详解Vue一个案例引发「内容分发slot」的最全总结


Posted in Javascript onDecember 02, 2018

今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结。

今天我们来说说 Vue 中的内容分发 <slot> ,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 <slot> 元素作为承载内分发内容的出口,内容分发是 Vue 中一个非常重要的功能,很多第三方的框架库都使用到了

<slot> 功能,所以掌握这个技能是非常重要的。

它可以让我们更加优雅的使用组件。

我对 <slot> 的理解有三点或者说优势,当然,这个只是我个人的理解,如果你有不同理解的地方,欢迎交流讨论,这样才能碰出不一样的花火。

回到主题,我对内容分发的三点理解:

  • 可以优雅的包装原生的 HTML 标签
  • 组件标签可以嵌套,就像使用原生 HTML 标签一样
  • 让组件更加的通用和可复用

如果没有 <slot> 元素,当我们在组件的标签中使用组件标签或者组件标签中使用 HTML 原生标签,都是没有任何作用的,这个和我们以往使用和认识的 HTML 是相违背的。

下面我们就对这三点去做一个详细的阐述,先从一个张图开始。

详解Vue一个案例引发「内容分发slot」的最全总结

这个大家都见过,一个标准的 dialog 对话框,项目中也经常使用到,我们把它抽出来做成一个组件如下:

<div class="dialog-panel">
 <div class="dialog-header">
  <h3 class="title">标题</h3>
  <button class="close">x</button>
 </div>
 <div class="dialog-content">这是一个标准的 dialog 对话框</div>
 <div class="dialog-footer">
  <el-button type="primary" plain>取消</el-button>
  <el-button type="primary">确定</el-button>
 </div>
</div>

首先这个组件不够灵活,内容基本上是写死的,就拿标题来说,我们希望标题是可以变化的,让使用者可以传递标题进来,那么我们该如何去设计我们的这个组件呢?这就是我们今天要说的内容分发 <slot> 了,我们小小的修改下我们的例子。

<div class="dialog-panel">
 <slot></slot>
 <div class="dialog-content">这是一个标准的 dialog 对话框</div>
 <div class="dialog-footer">
  <el-button type="primary" plain>取消</el-button>
  <el-button type="primary">确定</el-button>
 </div>
</div>

在父组件中使用它

<dialog-panel>
 <div class="dialog-header">
  <h3 class="title">传递进来的标题</h3>
  <button class="close">x</button>
 </div>
</dialog-panel>

你会发现组件渲染之后, <slot> 元素会被替换成组件中包裹的元素,标题的内容完全由外部传递进来。

详解Vue一个案例引发「内容分发slot」的最全总结

上面我们只是嵌套了一个简单的 div 标签元素,插槽可以传入任何的元素,不管是HTML,还是组件元素。

插槽的默认内容

不仅如此,插槽还支持默认内容,当我们在外部没有传递给插槽内容时,我们可以给插槽一个默认的显示内容,如果外部有内容,默认的内容将会被外部的内容替换掉。

<div class="dialog-panel">
 <slot>
  <div class="dialog-header">
    <h3 class="title">这是默认标题</h3>
    <button class="close">x</button>
  </div>
 </slot>
 <div class="dialog-content">这是一个标准的 dialog 对话框</div>
 <div class="dialog-footer">
  <el-button type="primary" plain>取消</el-button>
  <el-button type="primary">确定</el-button>
 </div>
</div>

在父组件中使用它,不嵌套任何的内容时,我们的组件就会有个默认的渲染标题。

<dialog-panel>
  //无内容
</dialog-panel>

详解Vue一个案例引发「内容分发slot」的最全总结

如果我们在父组件中提供了内容,默认的内容就会被替换。

<dialog-panel>
  <div class="dialog-header">
    <h3 class="title">我是新传递的标题</h3>
    <button class="close">x</button>
  </div>
</dialog-panel>

详解Vue一个案例引发「内容分发slot」的最全总结

具名插槽

有些时候,我们除了标题有这么高的自由度之外,我们也想其它的内容也有这样的灵活性,让使用者也能通过父组件传递进来,Vue 中给我们提供了方法,我们一次可以使用很多插槽,然后给每一个插槽起个名字,也就是给我们的 <slot> 添加一个 name 属性。

于是我们就开始修改我们的对话框

<div class="dialog-panel">
 <slot name="header"></slot>
 <slot name="content"></slot>
 <slot name="footer"></slot>
</div>

我们在外部使用时,只需要提供相应名称,我们就可以渲染出我们需要的

<dialog-panel>
 <template slot="header">
  <div class="dialog-header">
   <h3 class="title">带名字的插槽</h3>
   <button class="close">x</button>
  </div>
 </template>
 <template slot="content">
  <div class="dialog-content">这是一个标准的 dialog 对话框</div>
 </template>
 <template slot="footer">
  <div class="dialog-footer">
   <el-button type="primary" plain>取消</el-button>
   <el-button type="primary">确定</el-button>
  </div>
 </template>
</dialog-panel>

详解Vue一个案例引发「内容分发slot」的最全总结

可以看到,我们在外部可以控制组件的全部内容只要我们需要,这给我们的组件带来了很高的灵活性。除了灵活性,Vue 中还给我提供了一种叫 作用域插槽 的用法,它让我们的组件更加的复用性。

具名插槽不仅仅只能用在 <template> 元素上,它也可以直接用在一个普通的元素上

<div slot="header" class="dialog-header">
  <h3 class="title">带名字的插槽</h3>
  <button class="close">x</button>
</div>

作用域插槽

作用域插槽在 Vue 中是一个非常重要的一个功能,它让组件更加的可复用性,但是官方文档上对作用域插槽的解释很令人蛋疼,反正我是看了几遍不是太理解,最后通过自己写了几个案例才明白原来可以这么厉害,如果你也和我一样一开始不太理解,不妨跟着我看看下面的案例或许对你的帮助很大。

首先我们实现一个星级评价组件

详解Vue一个案例引发「内容分发slot」的最全总结

<template>
<div class="rate-list">
  <span 
   v-for="(star, index) in stars" 
   :key="index" 
   @click="clickStart(index)"
  >
   <i v-bind:class="[star ? off : on]"></i>
  </span>
</div>
<template>
<script>
export default {
 name: "RateList",
 data() {
  return {
   off: "el-icon-star-off",
   on: "el-icon-star-on",
   rating: 2
  };
 },
 methods: {
  clickStart(index) {
   this.rating = index + 1;
  }
 },
 computed: {
  stars() {
   return [1, 2, 3, 4, 5].map(value => this.rating < value);
  }
 }
};
</script>

这是我们写死的一个星级评价组件,一直都用着还不错,可是突然有一天呢,产品说这个小星星用腻歪了能不能换个别的图标?我最近爱上了 :heart: 形

所以用这个表示吧。到这里,你可能也想到了我们把这个图标给抽离出来,放在外部,所以我们结合上面刚刚学到的 <slot> 元素去修改组件。

<div class="rate-list">
  <slot></slot>
</div>

在父组件中使用:

<rate-list>
 <span 
  v-for="(star, index) in stars" 
  :key="index" 
  @click="clickStart(index)"
 >
  <i v-bind:class="[star ? off : on]"></i>
 </span>
</rate-list>

完成之后呢,我们再也不怕以后更换内容的情况了,不管以后怎么换,我都可以在使用的时候直接在外部添加内容即可,但是似乎有一些问题,因为我们的代码看起来不是很优雅,而且我们把操作逻辑都放在的父组件中,这显然不太友好,最好的方式肯定是我们只需要在父组件中直接调用即可,所以作用域插槽这里就起到很大的作用了,我们来看看如果使用作用域插槽是如何保持优雅的。

<div class="rate-list">
  <span 
   v-for="(star, index) in stars" 
   :key="index" 
   @click="clickStart(index)"
  >
   <slot :star="star"></slot>
  </span>
</div>

在父组件中使用:

<div class="rate-list">
  <span 
   v-for="(star, index) in stars" 
   :key="index" 
   @click="clickStart(index)"
  >
   <slot :star="star"></slot>
  </span>
</div>

可以看到我们把操作逻辑全部都放在了组件内部,在外部我们只需要添加需要的元素即可,简单优雅高复用性。

在 Vue2.5.0+,slot-scope 不再限制在 <template> 元素上使用,而可以用在插槽内的任何元素或组件上

有些同学看到这里可能还没有很好的理解 作用域插槽 ,那好吧我就送佛送到西,咱继续看一个例子,我们创建一个列表面板组件。

<template>
 <div class="list-box">
  <h1>{{title}}</h1>
  <ul>
   <li v-for="(item, index) in list" :key="index">
    <slot :item="item"></slot>
   </li>
  </ul>
 </div>
</template>
<script>
export default {
 name: "List",
 props: {
  title: String,
  list: Array
 }
};
</script>

在父组件中使用:

<template>
 <div class="tirp-wrapper">
  <list title="酒店列表" :list="list">
   <span slot-scope="props">
    {{props.item.name}}
   </span>
  </list>
 </div>
</template>
<script>
import List from "./List";
export default {
 name: "Trip",
 components: { List },
 data() {
  return {
   list: [{
    name: "四季度假村酒店"
   },{
    name: "布宜诺斯艾利斯四季酒店"
   },{
    name: "孟买四季酒店"
   },{
    name: "新加坡四季酒店"
   }]
  };
 }
};
</script>

详解Vue一个案例引发「内容分发slot」的最全总结

我们再来给每个酒店添加一些描述标签,也能够完美的展示出来。

<template>
 <div class="tirp-wrapper">
  <list title="酒店列表" :list="list">
   <div slot-scope="props">
    <span>
    {{props.item.name}}
   </span>
   <el-tag>{{props.item.tag}}</el-tag>
   </div>
  </list>
 </div>
</template>
<script>
import List from "./List";
export default {
 name: "Trip",
 components: { List },
 data() {
  return {
   list: [{
     name: "四季度假村酒店",
     tag: "海滨风光"
    },{
     name: "布宜诺斯艾利斯四季酒店",
     tag: "轻奢度假"
    },{
     name: "孟买四季酒店",
     tag: "服务周到"
    },{
     name: "新加坡四季酒店",
     tag: "沙海绿洲"
    }]
  };
 }
};
</script>

详解Vue一个案例引发「内容分发slot」的最全总结

画风一转,下面我们把它变成一个消息通知列表,可以看到每个文章的点赞数量。

<template>
 <div class="tirp-wrapper">
  <list title="消息通知" :list="list">
   <div slot-scope="props">
    <span>
    {{props.item.title}}
   </span>
   <el-badge :value="props.item.value" :max="99">
    <el-button size="mini">
     <i class="fa fa-thumbs-o-up"></i>
    </el-button>
   </el-badge>
   </div>
  </list>
 </div>
</template>
<script>
import List from "./List";
export default {
 name: "Trip",
 components: { List },
 data() {
  return {
   list: [{
     title: "Vue一个案例引发「动画」的使用总结",
     value: 200
    },{
     title: "Vue一个案例引发的递归组件的使用",
     value: 20
    },{
     title: "Vue一个案例引发的动态组件与全局事件绑定总结",
     value: 50
    }]
  };
 }
};
</script>

详解Vue一个案例引发「内容分发slot」的最全总结

可以看到,不管我们如何的去修改数据结构也好,添加不同的内容也罢,我们都可以完美的完成,而且不用修改我们的子组件,只需要在外部调用时填充我们需要的内容即可。

有没有感受到作用于插槽的强大与灵活。

如果用一句话来描述作用域插槽的话:它可以让我们在父组件中访问子组件的数据,就像利用 props 属性让子组件访问到父组件的数据一样。

总结

插槽是一个重要且非常强大的功能,它可以让我们的组件具有非常 的灵活性与可复用性,而作用域插槽更加的强化了这些特性。

作用域插槽是一个不太好理解的地方,希望通过本篇文章能够让你解惑。

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

Javascript 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
javascript字符串函数汇总
Dec 06 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
Mac下安装vue
Apr 11 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 #Javascript
GOJS+VUE实现流程图效果
Dec 01 #Javascript
JavaScript实现简单轮播图效果
Dec 01 #Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
vue实现移动端悬浮窗效果
Dec 01 #Javascript
You might like
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JavaScript中string对象
2015/06/12 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
通信工程专业毕业生推荐信
2013/12/25 职场文书
小班秋游活动方案
2014/02/22 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
在职证明格式样本
2015/06/15 职场文书
Java 数组的使用
2022/05/11 Java/Android