Vue躬行记(6)——内容分发
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)——内容分发的更多相关文章
- Vue躬行记(7)——渲染函数和JSX
除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分 ...
- Vue躬行记(1)——数据绑定
Vue.js的核心是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中,即通过模板将数据显示在页面上,如下所示. <div id="container">{{c ...
- Vue躬行记(2)——指令
Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...
- Vue躬行记(3)——样式和表单
Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- Vue躬行记(9)——Vuex
Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景.Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性.正确性和可预测性,这不仅让调试变得可追踪,还让代 ...
- Vue躬行记(4)——组件
组件是可复用的Vue实例,拥有属于自己的数据.模板.脚本和样式,可避免繁重的重复性开发.由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信. 一.注册 在使用 ...
- Vue躬行记(5)——组件通信
组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式. 一.直接访问 Vue提供了三个实例属性,可直接访问父组件.子组件和根实例,如下所列. (1)$parent:父组件. (2)$ro ...
- ES6躬行记(1)——let和const
古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...
随机推荐
- session,cookie,sessionStorage,localStorage的相关设置以及获取删除
一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...
- python编程基础之三十二
成员方法:成员方法就是一个函数,只是作用域在类内,并且第一个参数必须是self,self代表当前对象, class Dog(object): def bark(self): #成员方法,第一个参数必须 ...
- NAT模式实现虚拟机共享主机网络
上一节我们在虚拟机上搭建了linux系统,并利用桥接模式访问互联网,这一节,我们来配置一下通过NAT模式访问互联网.说到这里有些小伙伴可能要问了,NAT模式和桥接模式有什么区别呢? 桥接模式: 虚拟机 ...
- Spring基础(二)
一.使用注解配置Spring 1.1步骤 --配置文件中,指明注解位置 --要用的地方打上注解 --改对象的作用范围(修改掉默认的单例,变多例) --属性的注入(两种) 使用的反射实现 set方法实现 ...
- java位运算,逻辑运算符
位运算逻辑运算符包括: 与(&),非(~),或(|),异或(^). &: 条件1&条件2 ,只有条件1和条件2都满足, 整个表达式才为真true, 只要有1个为false ...
- vc++中字符串的免杀
一:格式字符: http://baike.baidu.com/view/2194593.htm d:以十进制形式输出带符号整数(正数不输出符号)o:以八进制形式输出无符号整数(不输出前缀o)x:以十六 ...
- CSP-S 初赛内容整理
图灵奖 艾伦·麦席森·图灵(Alan Mathison Turing,1912-1954)1966 共计70名科学家获此殊荣,华人仅有1位,他是2000年姚期智. 解释型语言 Python / Jav ...
- [模板]二维ST表
考试yy二维ST表失败导致爆零. 其实和一维的ST表很像... 也是设$f[i][j][p][q]$为以$(i, j)$为左上角,长为$2^p$,宽为$2^q$的矩形的最大值. 算法流程是先把每一行都 ...
- 网站是HTTP?10分钟变成HTTPS!域名免费添加配置SSL证书,变成https//环境
对于小程序request请求需要https域名.navigator.geolocation定位也需要在https环境下才可以生效等问题: 前端开发越来越需要https环境来来测试一下API接口和各类问 ...
- json::rapidjson工具
源码地址: https://github.com/Tencent/rapidjson 可跨平台使用.将 rapidjson-master\include\rapidjson 中的 rapidjson ...