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 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
node.js require() 源码解读
2015/12/13 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
react redux入门示例
2018/04/19 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
Seajs源码详解分析
2019/04/02 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python 下载文件的多种方法汇总
2020/11/17 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
JPA面试常见问题
2016/11/14 面试题
买房协议书
2014/04/11 职场文书
婚前保证书
2014/04/29 职场文书
公司离职证明范本
2014/10/17 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
高中政治教师教学反思
2016/02/23 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书