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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
javascript 常用方法总结
Jun 03 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery事件用法详解
Oct 06 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
js实现详情页放大镜效果
Oct 28 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
mysql+php分页类(已测)
2008/03/31 PHP
隐性调用php程序的方法
2009/03/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php获取汉字首字母的函数
2013/11/07 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Javascript实现打鼓效果
2021/01/29 Javascript
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
remote接口和home接口主要作用
2013/05/15 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
2014信息公开实施方案
2014/02/22 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
专职安全员岗位职责
2015/04/11 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang