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 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
webpack3.0升级4.0的方法步骤
Apr 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
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PDO::setAttribute讲解
2019/01/29 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
Python中的并发编程实例
2014/07/07 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python多维数组切片方法
2018/04/13 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
英文导游欢迎词
2014/01/11 职场文书
教导处工作制度
2014/01/18 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
绘画专业自荐信
2014/07/04 职场文书
实习介绍信模板
2015/01/30 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript