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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
JavaScript实现电灯开关小案例
Mar 30 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
详解a++和++a的区别
2017/08/30 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
vue实现模态框的通用写法推荐
2018/02/26 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
玩具公司的创业计划书
2013/12/31 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
交通安全标语
2014/06/06 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server