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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
Vue运用transition实现过渡动画
2019/05/06 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
化妆品店促销方案
2014/02/24 职场文书
大二学习计划书范文
2014/04/27 职场文书
创新社会管理心得体会
2014/09/12 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
红楼梦读书笔记
2015/06/25 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年国陪研修感言
2015/11/18 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS