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脚本代码跑起来。
Jan 09 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
Javascript writable特性介绍
Feb 27 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 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中mb_strpos的使用
2018/02/04 PHP
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python实现简单的购物程序代码实例
2020/03/03 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
线程同步的方法
2016/11/23 面试题
文明礼仪伴我行演讲稿
2014/05/12 职场文书
专项法律服务方案
2014/06/11 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL