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 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
javascript demo 基本技巧
Dec 18 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
layUI的验证码功能及校验实例
Oct 25 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
PHP4之COOKIE支持详解
2006/10/09 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
PHP7 windows支持
2021/03/09 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Python如何实现机器人聊天
2020/09/10 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
暑期社会实践方案
2014/02/05 职场文书
初中学校军训方案
2014/05/09 职场文书
食品安全宣传标语
2014/06/07 职场文书
党员进社区活动总结
2015/05/07 职场文书
房屋维修申请报告
2015/05/18 职场文书
结婚司仪主持词
2015/06/29 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
Golang jwt身份认证
2022/04/20 Golang