vue组件详解之使用slot分发内容


Posted in Javascript onApril 09, 2018

一、什么是slot

在使用组件时,我们常常要像这样组合它们:

<app>
 <app-header></app-header>
 <app-footer></app-footer>
</app>

当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion )。

注意两点:

1.< app>组件不知道它的挂载点会有什么内容。挂载点的内容是由<app >的父组件决定的。

2.<app> 组件很可能有它自己的模板。

props 传递数据、events 触发事件和slot 内容分发就构成了Vue 组件的3 个API 来源,再复杂的组件也是由这3 部分构成的。

 二、作用域

<child-component>
 {{ message }}
</child-component>

这里的message 就是一个slot ,但是它绑定的是父组件的数据,而不是组件<child-component>的数据。

父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译。如:

<div id="app15">
      <child-component v-show="showChild"></child-component>
    </div>
Vue.component('child-component',{
  template: '<div>子组件</div>'
});
var app15 = new Vue({
  el: '#app15',
  data: {
    showChild: true
  }
});

这里的状态showChild 绑定的是父组件的数据,如果想在子组件上绑定,那应该是:

<div id="app15">
      <child-component></child-component>
    </div>
Vue.component('child-component',{
  template: '<div v-show="showChild">子组件</div>',
  data: function(){
    return {
      showChild: true
    }
  }
});

因此, slot 分发的内容,作用域是在父组件上的。

三、slot用法

3.1 单个slot

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot(插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的<slot> 标签及它的内容。   

<div id="app16">
      <my-component16>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
      </my-component16>
    </div>
Vue.component('my-component16',{
  template: '<div>' +
        '<slot><p>如果父组件没有插入内容,我将作为默认出现<</p></slot>' +
//预留的slot插槽
       '</div>'
});
var app16 = new Vue({
  el: '#app16'
});

渲染结果为:

<div id=”app16”>
  <div>
    <p>分发的内容<p>
    <p>更多分发的内容<p>
  </div>
</div>

 子组件child-component 的模板内定义了一个<slot>元素,并且用一个<p>作为默认的内容,在父组件没有使用slot 时,会渲染这段默认的文本;如果写入了slot, 那就会替换整个<slot> 。

3.2具名slot

给<slot> 元素指定一个name 后可以分发多个内容,具名Slot 可以与单个slot 共存。

<div id="app17">
      <my-component17>
        <h3 slot="header">标题</h3>
        <p>正文内容</p>
        <p>更多正文内容</p>
        <h3 slot="footer">底部信息</h3>
      </my-component17>
    </div>
Vue.component('my-component17',{
  template: '<div class="container">' +
         '<div class="header">' +
          '<slot name="header"></slot>' +
         '</div>' +
         '<div class="main">' +
          '<slot></slot>' +
         '</div>'+
         '<div class="footer">' +
          '<slot name="footer"></slot>' +
         '</div>'+
       '</div>'
});
var app17 = new Vue({
  el: '#app17'
});

渲染结果为:         

<div id="app17">
        <div class="container">
          <div class="header">
            <h3>标题</h3></div>
          <div class="main"> 
            <p>正文内容</p> 
            <p>更多正文内容</p> 
          </div>
          <div class="footer">
            <h3>底部信息</h3>
          </div>
        </div>
      </div>

 子组件内声明了3 个<s lot>元素,其中在<div class=” main >内的<slot> 没有使用name 特性,它将作为默认slot 出现,父组件没有使用slot 特性的元素与内容都将出现在这里。

如果没有指定默认的匿名slot ,父组件内多余的内容片段都将被抛弃。

四、作用域插槽

作用域插槽是一种特殊的slot ,使用一个可以复用的模板替换己渲染元素。

看一个例子:     

<div id="app18">
      <my-component18>
        <template scope="props">
          <p>来自父组件的内容</p>
          <p>{{props.msg}}</p>
        </template>
      </my-component18>
    </div>
Vue.component('my-component18',{
  template: '<div class="container"><slot msg="来自子组件的内容"></slot></div>'
});
var app18 = new Vue({
  el: '#app18'
});

观察子组件的模板,在<slot>元素上有一个类似props 传递数据给组件的写法msg=” xxx ”,将数据传到了插槽。

父组件中使用了<template>元素,而且拥有一个scope=”props ”的特性,这里的props只是一个临时变量,就像v-for= ” item in items 里面的item 一样,template 内可以通过临时变量props访问来自子组件插槽的数据msg 。

下面看下Vue组件中slot的用法

主要是让组件的可扩展性更强。

1. 使用匿名slot

vue组件详解之使用slot分发内容

2. 给slot加个名字

vue组件详解之使用slot分发内容

如果不在有slot的组件里加入任何标签,slot什么都不会显示的。

总结

以上所述是小编给大家介绍的vue组件详解之使用slot分发内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 #Javascript
Vue入门之animate过渡动画效果
Apr 08 #Javascript
vue组件与复用详解
Apr 08 #Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 #Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php中smarty区域循环的方法
2015/06/11 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
董事长职责范文
2013/11/08 职场文书
关于逃课的检讨书
2014/01/23 职场文书
中学生运动会入场词
2014/02/12 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL