22. VUE 插槽-详解
插槽
一直对插槽不理解,今天学习,并整理一下,希望日后可以灵活运用。
(一)插槽内容
先简单来个例子,看一下插槽的租作用。
1.1 不使用插槽
父组件中:
<div id="app">
<h1>这是父组件:{{msg}}</h1>
<child-component>你好</child-component>
</div>
子组件中:
<div>
<h2>这是子组件,Child-Component</h2>
</div>
结果:
结论:
父组件引用子组件时,在子组件内写入:如(你好或者html),都不会显示。
1.2 使用插槽
父组件中:
<div id="app">
<h1>这是父组件:{{msg}}</h1>
<child-component>你好</child-component>
</div>
子组件中:
<div>
<h2>这是子组件,Child-Component</h2>
<slot></slot>
</div>
结果:
结论:
Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot>
元素作为承载分发内容的出口。当组件渲染的时候,<slot></slot>
将会被替换为“你好”。插槽内可以包含任何模板代码,包括 HTML
1.3 包含html
父组件:
<div id="app">
<h1>这是父组件:{{msg}}</h1>
<child-component>
<span>slot 测试</span>
</child-component>
</div>
1.4 如果子组件没有<slot>
如果子组件中没有任何的<slot>,那么在父组件中引用子组件时,在子组件的起始标签和结束标签之间的任何内容都会被抛弃。
(二)后备内容
后备内容,即为没有为插槽设置任何内容时,显示的默认内容。
父组件:
没有为插槽设置任何内容
<div id="app">
<h1>这是父组件:{{msg}}</h1>
<child-component></child-component>
</div>
子组件:
在子组件中,添加后备内容
<div>
<h2>这是子组件,Child-Component</h2>
<slot>
<span>这是后备内容</span>
</slot>
</div>
结果:
但是如果设置插槽,后备内容则不会显示。
(三)具名插槽
有的时候,我们需要多个插槽,例如:
父子件:
<div id="app">
<h1 style="text-align: center">这是父组件:{{msg}}</h1>
<child-component>
<template v-slot:header>
<h3 style="text-align: center;color: blue">这是header部分</h3>
</template>
<p style="color: blueviolet;text-align: center">这是主题部分</p>
<template v-slot:fooder>
<h3 style="text-align: center;color: aqua">这是fooder部分</h3>
</template>
</child-component>
</div>
子组件:
<div>
<h2 style="text-align: center">这是子组件,Child-Component</h2>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
(四)作用域插槽
父组件中插槽中,可以取到子组件中数据。
父组件:
在v-slot添加元素上的特性被称为插槽 prop
<div id="app">
<h2 >这是父组件!</h2>
<child-slot>
<template v-slot:default="user">
<p>父组件中,取子组件中的值:{{user.user.lastName}}</p>
</template>
</child-slot>
</div>
子组件:
在<slot>中,绑定数据v-bind:user="user"
<div>
<h2>这是子组件</h2>
<span>FirstName:{{user.firstName}},LastName:{{user.lastName}}</span>
<slot v-bind:user="user">{{user.lastName}}</slot>
</div>
结果:
(五)独占默认插槽的缩写语法
当子组件中,只提供默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot
直接用在组件上:
<child-slot>
<template v-slot:default="user">
<p>父组件中,取子组件中的值:{{user.user.lastName}}</p>
</template>
</child-slot>
也可以,简写为:
<child-slot>
<template v-slot="user">
<p>父组件中,取子组件中的值:{{user.user.lastName}}</p>
</template>
</child-slot>
22. VUE 插槽-详解的更多相关文章
- Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- Vue插槽详解 | 什么是插槽?
作者 | Jeskson 来源 | 达达前端小酒馆 什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分 ...
- Vue插槽详解
简介 插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去.插槽的出现,让组件变的更加灵活. 一.匿名插槽 // 组件(父) <my-component> < ...
- cocos2dx常见的46中+22中动作详解
cocos2dx常见的46中+22中动作详解 分类: iOS2013-10-16 00:44 1429人阅读 评论(0) 收藏 举报 bool HelloWorld::init(){ ///// ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
随机推荐
- (嘎吧)--微软的 C# , IL,CLR, Cup 之间关系以及扩展联想
还是啰嗦下:文章短并不代表文章质量不高.我最喜欢用干货性的以及总结性的语言 让大家明白文章要表达的内容.这一切,都是来自多年对.NET 的一些领悟以及一些理解. 不长篇大论,一本人也没时间,二本人也不 ...
- Python中的sklearn--KFold与StratifiedKFold
KFold划分数据集的原理:根据n_split直接进行划分 StratifiedKFold划分数据集的原理:划分后的训练集和验证集中类别分布尽量和原数据集一样 #导入相关packages from s ...
- Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用
基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...
- LeetCode392. 判断子序列
原题链接 1 class Solution: 2 def isSubsequence(self, s: str, t: str) -> bool: 3 lens,lent = len(s),le ...
- 关于Laravel框架中Guard的底层实现
1. 什么是Guard 在Laravel/Lumen框架中,用户的登录/注册的认证基本都已经封装好了,开箱即用.而登录/注册认证的核心就是: 用户的注册信息存入数据库(登记) 从数据库中读取数据和用户 ...
- MySQL日志收集之Filebeat和Logstsh的一键安装配置(ELK架构)
关于ELK是什么.做什么用,我们不在此讨论.本文重点在如何实现快速方便地安装logstash和filebeat组件,特别是在近千台DB Server的环境下(为了安全保守,公司DB Server 目前 ...
- SpringMVC-05 Json交互处理
SpringMVC-05 Json交互处理 Json 1.什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别 ...
- MySQL全面瓦解25:构建高性能索引(案例分析篇)
回顾一下上面几篇索引相关的文章: MySQL全面瓦解22:索引的介绍和原理分析 MySQL全面瓦解23:MySQL索引实现和使用 MySQL全面瓦解24:构建高性能索引(策略篇) 索引的十大原则 1. ...
- Java数组:多维数组(二维),Arrays类,冒泡排序
Arrays类数组工具类:java.util.ArraysArrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用,而"不用"使用对象来调用 具有 ...
- HDFS的上传流程以及windows-idea操作文件上传的注意
HDFS的上传流程 命令:hdfs dfs -put xxx.wmv /hdfs的文件夹 cd进入到要上传文件的当前目录,再输入hdfs命令上传,注意-put后tab可以自动补全, 最后加上你要上传到 ...