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创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
javascript数组去重方法分析
Dec 15 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
JavaScript实现单点登录的示例
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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
thinkPHP查询方式小结
2016/01/09 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
解析Python中while true的使用
2015/10/13 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python 合并拼接字符串的方法
2020/07/28 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
初一语文教学反思
2016/03/03 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server