Vue slot用法(小结)


Posted in Javascript onOctober 22, 2018

之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来可能种花种菜,也有可能在这块地上建房子。然而slot可以以一当十,可以插入很多东西。不知明白否?

由于项目经验有限,这篇我就先跟着官网的知识点走,当然会加入自己的部分项目代码。

关于slot是这样说的,

除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

单个 Slot

在子组件内使用特殊的<slot>元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容.示例代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <p>分发的内容</p>
      <p>更多分发的内容</p>
    </child-component>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

  <script>

    Vue.component('child-component', {
      template: '\
      <div>\
        <slot>\
          <p>如果父组件没用插入内容,我将作为默认出现</p>\
        </slot>\
      </div>'
    });

    var app = new Vue({
      el: '#app'
    })

  </script>

</body>
</html>

子组件 child-component 的模板内定义一个 <slot> 元素,并且用一个 <p> 作为默认的内容,在父组件没有使用 slot 时,会渲染这段默认的文本;如果写入了 slot ,那就会替换整个 <slot>.所以上列渲染后的结果为:

<div id="app">
   <div>
    <p>分发的内容</p>
    <p>更多分发的内容</p>
  </div>
</div>

注意:子组件<slot>内的备用内容,它的作用域时子组件本身.

具名 Slot

给 <slot> 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <h2 slot="header">标题</h2>
      <p>正文内容</p>
      <p>更多正文内容</p>
      <div slot="footer">底部信息</div>
    </child-component>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

  <script>

    Vue.component('child-component', {
      template: '\
      <div class="component">\
        <div class="header">\
          <slot name="header"></slot>\
        </div>\
        <div class="main">\
          <slot></slot>\
        </div>\
        <div class="footer">\
          <slot name="footer"></slot>\
        </div>\
      </div>'
    });

    var app = new Vue({
      el: '#app'
    })

  </script>

</body>
</html>

子组件内声明了3个 <slot> 元素,其中在<div class="main">内的<slot> 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里.

如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃.

上例最终渲染后的结果为:

<div id="app">
    <div class="container">
      <div class="header">
        <h2>标题</h2>
      </div>
      <div class="main">
        <p>正文内容</p>
        <p>更多的正文内容</p>
      </div>
      <div class="footer">
        <div>底部信息</div>
      </div>
    </div>
  </div>

在组合使用组件时,内容分发API至关重要.

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

Javascript 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 #Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 #Javascript
vue-cli项目中使用echarts图表实例
Oct 22 #Javascript
vue使用echarts图表的详细方法
Oct 22 #Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
You might like
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
利用PHP实现短域名互转
2013/07/05 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
如何使用Python调整图像大小
2020/09/26 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
党员十八大心得体会
2014/09/12 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
检讨书怎么写
2015/05/07 职场文书
学校教学工作总结2015
2015/05/19 职场文书
仙境之桥观后感
2015/06/16 职场文书
运动员入场前导词
2015/07/20 职场文书
python本地文件服务器实例教程
2021/05/02 Python