插槽

一直对插槽不理解,今天学习,并整理一下,希望日后可以灵活运用。

(一)插槽内容

先简单来个例子,看一下插槽的租作用。

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 插槽-详解的更多相关文章

  1. Vue 插槽详解

    Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...

  2. Vue插槽详解 | 什么是插槽?

    作者 | Jeskson 来源 | 达达前端小酒馆 什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分 ...

  3. Vue插槽详解

    简介 插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去.插槽的出现,让组件变的更加灵活. 一.匿名插槽 // 组件(父) <my-component> < ...

  4. cocos2dx常见的46中+22中动作详解

    cocos2dx常见的46中+22中动作详解 分类: iOS2013-10-16 00:44 1429人阅读 评论(0) 收藏 举报 bool HelloWorld::init(){    ///// ...

  5. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  6. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  7. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  8. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  9. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

随机推荐

  1. (嘎吧)--微软的 C# , IL,CLR, Cup 之间关系以及扩展联想

    还是啰嗦下:文章短并不代表文章质量不高.我最喜欢用干货性的以及总结性的语言 让大家明白文章要表达的内容.这一切,都是来自多年对.NET 的一些领悟以及一些理解. 不长篇大论,一本人也没时间,二本人也不 ...

  2. Python中的sklearn--KFold与StratifiedKFold

    KFold划分数据集的原理:根据n_split直接进行划分 StratifiedKFold划分数据集的原理:划分后的训练集和验证集中类别分布尽量和原数据集一样 #导入相关packages from s ...

  3. Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用

    基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...

  4. LeetCode392. 判断子序列

    原题链接 1 class Solution: 2 def isSubsequence(self, s: str, t: str) -> bool: 3 lens,lent = len(s),le ...

  5. 关于Laravel框架中Guard的底层实现

    1. 什么是Guard 在Laravel/Lumen框架中,用户的登录/注册的认证基本都已经封装好了,开箱即用.而登录/注册认证的核心就是: 用户的注册信息存入数据库(登记) 从数据库中读取数据和用户 ...

  6. MySQL日志收集之Filebeat和Logstsh的一键安装配置(ELK架构)

    关于ELK是什么.做什么用,我们不在此讨论.本文重点在如何实现快速方便地安装logstash和filebeat组件,特别是在近千台DB Server的环境下(为了安全保守,公司DB Server 目前 ...

  7. SpringMVC-05 Json交互处理

    SpringMVC-05 Json交互处理 Json 1.什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别 ...

  8. MySQL全面瓦解25:构建高性能索引(案例分析篇)

    回顾一下上面几篇索引相关的文章: MySQL全面瓦解22:索引的介绍和原理分析 MySQL全面瓦解23:MySQL索引实现和使用 MySQL全面瓦解24:构建高性能索引(策略篇) 索引的十大原则 1. ...

  9. Java数组:多维数组(二维),Arrays类,冒泡排序

    Arrays类数组工具类:java.util.ArraysArrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用,而"不用"使用对象来调用 具有 ...

  10. HDFS的上传流程以及windows-idea操作文件上传的注意

    HDFS的上传流程 命令:hdfs dfs -put xxx.wmv /hdfs的文件夹 cd进入到要上传文件的当前目录,再输入hdfs命令上传,注意-put后tab可以自动补全, 最后加上你要上传到 ...