一、什么是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'
});

渲染结果为:

<div id=”app18”>
<div class=”container”>
<p>来组父组件的内容</p>
<p>来自子组件的内容</p>
</div>
</div>

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

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

vue组件详解——使用slot分发内容的更多相关文章

  1. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  2. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  3. vue组件详解(五)——组件高级用法

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...

  4. vue 外卖app(3) 利用slot分发内容

    1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...

  5. 6. vue组件详解(一)

    主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...

  6. vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  7. vue组件详解(三)——组件通信

    组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...

  8. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  9. vue组件详解——组件通信

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. ...

随机推荐

  1. 借鉴Glide思想二次封装Fresco

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 最近封装了个 Fresco 的组件库:DFresco,就顺便来讲讲. 背景 Fresco 图片库很强大,我们项目中就是使用的 Fre ...

  2. 【读书笔记】iOS-使用钥匙串保护数据

    一,将应用从设备上删除时,并不会删除其钥匙串项,这使得调试工作困难得多.模拟器有一个Reset Contents and Settings选项,可用于将钥匙串项移除.因此,强烈建议在模拟器上确定Key ...

  3. centos6 自带python2.6升级python2.7+

    centos6系统自带Python为2.6.6版本,升级搞版本操作如下(python2-python3都一样) 1.下载需要升级的python包 官方下载地址:https://www.python.o ...

  4. SuperMap-iServer过滤请求返回值

    目的: iServer发布的arcgis地图服务中,由于tileinfo参数为null,导致用arcgis-ios客户端开发的APP闪退.通过过滤器将get请求的返回值修改 代码: package c ...

  5. 快速排序的java实现

    快速排序也属于“交换”类的排序. 核心思想可以概括为:通过多次划分操作实现排序.每一趟选择当前所有子序列中的一个关键字(通常是第一个)作为枢轴,将小于它的元素统统放到它的前面,大于它的统统放到它的后面 ...

  6. Neutron中插件与代理的总结

    1.总结:

  7. iOS--------获取当前连接的WiFi以及IP地址

    导入头文件 #import <ifaddrs.h>#import <arpa/inet.h>#import <SystemConfiguration/CaptiveNet ...

  8. Android 程序崩溃之后fragment出现画面重叠问题

    1.解决方法: 直接在包含Fragment的Activity中复写onSaveInstanceState()方法,使其空实现 @Override protected void onSaveInstan ...

  9. Android 四大组件之broadcast的理解

    Android广播的两种类型: 1.静态广播 2.动态广播 静态注册广播: Manifeast中的代码块: <receiver android:name=".broadcast.MyS ...

  10. Javac编译原理 《深入分析java web 技术内幕》第四章

    javac编译的四个主要的流程: 词法分析器:将源码转换为Token流 将源代码划分成一个个Token(找出java语言中的关键字) 语法分析器:将Token流转化为语法树 将上述的一个个Token组 ...