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. asp.net core刷新css缓存

    在非spa程序开发的时候.css经常会因为浏览器的缓存机制导致不刷新. 很多前端为了应对这个问题,都会引入webpack或者gulp等工具来处理css缓存的问题. 但是作为一个偏服务器端的程序员来说. ...

  2. GAN算法笔记

    本篇文章为Goodfellow提出的GAN算法的开山之作"Generative Adversarial Nets"的学习笔记,若有错误,欢迎留言或私信指正. 1. Introduc ...

  3. Web Storage和cookie的区别——每日一题20190629

    Web Storage? 使用HTML5可以在本地存储用户的浏览数据. 使用的主要目的是为了克服Cookie带来的一些限制,当数据需要被严格控制在客户端上时,无需持续的将数据发回服务器 主要目标: 1 ...

  4. 500行代码,教你用python写个微信飞机大战

    这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右 ...

  5. SQL Server 2012企业版和标准版的区别

    关于使用Microsoft SQL Server 数据库的公司一般会有疑问,企业版数据库和标准版数据库的区别在哪?如果采购企业版的价格和标准版的价格相差很大,从多方资料查询发现,我认为最主要的区别是硬 ...

  6. 导图梳理springboot手动、自动装配,让springboot不再难懂

    什么是springboot 在学springboot之前,你必须有spring.spring mvc基础,springboot的诞生其实就是用来简化新Spring应用的初始搭建以及开发过程,该框架使用 ...

  7. 树莓派3B/3B+ 清华镜像系统和安装中文输入法Fcitx及Google拼音输入法

    你还在为树莓派无法安装中文输入法而到处找教程吗? 你还在为树莓派每次下载都要远隔重洋获取资源,龟速下载而烦恼吗? 为了解决这个问题,在这篇树莓派教程中,我将手把手叫你怎样安装 清华镜像系统和中文输入法 ...

  8. Fiddle弱网测试

    1.打开Fiddler,Rules->Performance->勾选 Simulate Modem Speeds,勾选之后访问网站会发现网络慢了很多: 接下来给大家解释一下这些个都是什么意 ...

  9. [Luogu2824] [HEOI2016/TJOI2016]排序

    题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...

  10. vue 页面滚动到原位置

    哈哈哈,昨天登QQ的时候,意外发现有人看了我写的博客,居然还加了我,这就激起了我内心的小波澜啊 公司最近在做电商,用的前端框架依然是VUE 矩MAX(微信公众号)可以搜的到哦,安卓商店或苹果AppSt ...