Vue提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案。

一、插槽

  Vue内置了一个<slot>元素,能作为插槽(slot)存在,而插槽内可包含文本、HTML片段、组件等。以下面的btn组件为例,其模板中包含一个<slot>元素,在DOM中为btn组件添加了文本内容。

<btn>提交</btn>
<script>
Vue.component("btn", {
template: '<button><slot></slot></button>'
});
</script>

  渲染出的<button>元素会包含“提交”,即插槽被替换成了分发的内容,如下所示。

<button>提交</button>

  在插槽中允许添加默认的内容(即为<slot>元素附加内容,如下所示),当父组件没有传递内容时,它们就会被渲染。

Vue.component("btn", {
template: '<button><slot>提交</slot></button>'
});

二、具名插槽

  具名插槽是指包含名称的插槽,即指定了name特性的<slot>元素。当组件的模板中需要多个插槽时,就得通过名称来加以区分。例如有一个page组件,包含三个<slot>元素,其中有两个声明了name特性,如下所示。

Vue.component("page", {
template: `<div>
<header><slot name="header"></slot></header>
<section><slot></slot></section>
<footer><slot name="footer"></slot></footer>
</div>`
});

  如果要向具名插槽传递内容,那么可以在<template>元素上使用v-slot指令,并让插槽名称成为它的参数,如下所示。

<page>
<template v-slot:header>
<h1>头部</h1>
</template>
<p>内容</p>
<template v-slot:footer>
<h1>尾部</h1>
</template>
</page>

  渲染出的DOM结构如下所示,分发的内容替换了对应的插槽。

<div>
<header>
<h1>头部</h1>
</header>
<section>
<p>内容</p>
</section>
<footer>
<h1>尾部</h1>
</footer>
</div>

  所有没有被包裹在带v-slot指令的<template>元素中的内容(例如上面的<p>元素),都会传递给没有名称的插槽(即默认插槽)。

  注意,一个不带name特性的<slot>元素,其实也有名称,叫default。在v-slot指令中,也可以对其进行指定,如下所示。

<template v-slot:default>
<p>内容</p>
</template>

  v-slot指令不仅支持动态参数,还允许特殊的缩写,即将参数前的v-slot:替换成#号,如下所示。

<template v-slot:[obj.header]></template>
<template #header></template>

三、作用域插槽

  在讲解作用域插槽之前,需要要先了解一下编译作用域。

1)编译作用域

  父组件模板中的内容都是在父级作用域中编译的,而子组件模板中的内容都是在子级作用域中编译的,即两级作用域中的数据无法相互访问。下面以btn组件为例,它的模板中包含一个插槽,并在数据对象中声明了一个txt属性。

Vue.component("btn", {
data: function() {
return { txt:"提交" };
},
template: '<button><slot></slot></button>'
});

  在为btn组件提供插值形式的内容时,如下代码所示,由于当前作用域不存在txt属性,因此会抛出错误。

<btn>{{txt}}</btn>

2)作用域插槽

  这是一种特殊的插槽,其内容可访问子组件中的数据,即把模板传给插槽而不是渲染好的内容。还是以btn组件为例,与之前不同的是,为<slot>元素自定义了一个txt特性,并为其绑定数据对象的txt属性,如下所示。

Vue.component("btn", {
data: function() {
return { txt:"提交" };
},
template: '<button><slot :txt="txt"></slot></button>'
});

  在使用btn组件时,需要为v-slot指令传递一个变量,名称可自定义(例如slots),其值是由插槽上的自定义特性所组成的对象。

<btn>
<template v-slot:default="slots">
{{slots.txt}}
</template>
</btn>

  当只提供了默认插槽时,可将v-slot指令转移到组件上,并且可省略default名称,如下所示。

<btn v-slot="slots">
{{slots.txt}}
</btn>

  注意,缩写形式的默认插槽不能与具名插槽混用,因为这样会导致作用域不明确。

<btn v-slot="slots">
{{slots.txt}}
<template v-slot:custom></template>
</btn>

Vue躬行记(6)——内容分发的更多相关文章

  1. Vue躬行记(7)——渲染函数和JSX

    除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...

  2. Vue躬行记(1)——数据绑定

    Vue.js的核心是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中,即通过模板将数据显示在页面上,如下所示. <div id="container">{{c ...

  3. Vue躬行记(2)——指令

    Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...

  4. Vue躬行记(3)——样式和表单

    Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...

  5. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. Vue躬行记(9)——Vuex

    Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景.Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性.正确性和可预测性,这不仅让调试变得可追踪,还让代 ...

  7. Vue躬行记(4)——组件

    组件是可复用的Vue实例,拥有属于自己的数据.模板.脚本和样式,可避免繁重的重复性开发.由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信. 一.注册 在使用 ...

  8. Vue躬行记(5)——组件通信

    组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式. 一.直接访问 Vue提供了三个实例属性,可直接访问父组件.子组件和根实例,如下所列. (1)$parent:父组件. (2)$ro ...

  9. ES6躬行记(1)——let和const

    古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...

随机推荐

  1. session,cookie,sessionStorage,localStorage的相关设置以及获取删除

    一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...

  2. python编程基础之三十二

    成员方法:成员方法就是一个函数,只是作用域在类内,并且第一个参数必须是self,self代表当前对象, class Dog(object): def bark(self): #成员方法,第一个参数必须 ...

  3. NAT模式实现虚拟机共享主机网络

    上一节我们在虚拟机上搭建了linux系统,并利用桥接模式访问互联网,这一节,我们来配置一下通过NAT模式访问互联网.说到这里有些小伙伴可能要问了,NAT模式和桥接模式有什么区别呢? 桥接模式: 虚拟机 ...

  4. Spring基础(二)

    一.使用注解配置Spring 1.1步骤 --配置文件中,指明注解位置 --要用的地方打上注解 --改对象的作用范围(修改掉默认的单例,变多例) --属性的注入(两种) 使用的反射实现 set方法实现 ...

  5. java位运算,逻辑运算符

    位运算逻辑运算符包括: 与(&),非(~),或(|),异或(^). &:  条件1&条件2  ,只有条件1和条件2都满足, 整个表达式才为真true,  只要有1个为false ...

  6. vc++中字符串的免杀

    一:格式字符: http://baike.baidu.com/view/2194593.htm d:以十进制形式输出带符号整数(正数不输出符号)o:以八进制形式输出无符号整数(不输出前缀o)x:以十六 ...

  7. CSP-S 初赛内容整理

    图灵奖 艾伦·麦席森·图灵(Alan Mathison Turing,1912-1954)1966 共计70名科学家获此殊荣,华人仅有1位,他是2000年姚期智. 解释型语言 Python / Jav ...

  8. [模板]二维ST表

    考试yy二维ST表失败导致爆零. 其实和一维的ST表很像... 也是设$f[i][j][p][q]$为以$(i, j)$为左上角,长为$2^p$,宽为$2^q$的矩形的最大值. 算法流程是先把每一行都 ...

  9. 网站是HTTP?10分钟变成HTTPS!域名免费添加配置SSL证书,变成https//环境

    对于小程序request请求需要https域名.navigator.geolocation定位也需要在https环境下才可以生效等问题: 前端开发越来越需要https环境来来测试一下API接口和各类问 ...

  10. json::rapidjson工具

    源码地址: https://github.com/Tencent/rapidjson 可跨平台使用.将 rapidjson-master\include\rapidjson 中的 rapidjson ...