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调试工具(下载)
Jan 09 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Python sorted函数详解(高级篇)
2018/09/18 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
通信生自我鉴定
2014/01/18 职场文书
施工工地安全标语
2014/06/07 职场文书
北京奥运会主题口号
2014/06/13 职场文书
美术社团活动总结
2014/06/27 职场文书
小学开学标语
2014/07/01 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
迎新生标语大全
2014/10/06 职场文书
手术室护士个人总结
2015/02/13 职场文书
财务总监岗位职责范本
2015/04/03 职场文书