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  THIS详解 面向对象
Mar 25 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
vue语法自动转typescript(解放双手)
Sep 18 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
详解angular element()方法使用
2017/04/08 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
pycharm配置git(图文教程)
2019/08/16 Python
django自定义模板标签过程解析
2019/12/14 Python
python获取栅格点和面值的实现
2020/03/10 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
C++是不是类型安全的
2014/02/18 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
上课说话检讨书
2015/01/27 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
新年寄语2016
2015/08/17 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis