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版)
Nov 19 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 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 操作文件的一些FAQ总结
2009/02/12 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JavaScript 的继承
2011/10/01 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python3序列化与反序列化用法实例
2015/05/26 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python 下载文件的几种方法汇总
2021/01/06 Python
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
十佳青年个人事迹材料
2014/01/28 职场文书
2014年教研员工作总结
2014/12/23 职场文书
关于观后感的作文
2015/06/18 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
springcloud整合seata
2022/05/20 Java/Android
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL