Slot  v-slot 插槽元素

浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析。

使用插槽的好处?

比如一个网站 分布顶部都是一样的,如果使用组件,要写好几个导航组件。我只写一个导航组件,然后让插值里面东西去覆盖内容 就可以了。

* 在页面渲染的时候,slot元素会被替换成组件标签里面的东西。那这个slot就是哈哈哈。

* 不仅可以直接写内容,还可以套标签。还可以写其它组件。

1. 编译作用域 在谁的模板下,组件标签中的数据就是谁的。

<p>{{ name }}</p>   它在实例的模板下,所以是 李四

子组件:                                           父组件:

                  

2. 默认内容,组件标签中如果没有内容,在组件模板下<slot></slot>中的内容就是默认内容,如果在组件标签上写了内容,就不去渲染 slot里面的内容

<myhead></myhead>

<slot>哈哈哈哈我好帅</slot> 默认内容

  

3. 具名插槽

1. 为什么叫 具名插槽,就是说明有很多 slot ,每个 slot都有自己的名字。

2. slot 元素有个特殊的特性  :name。这个特性可以用来定义额外的插槽

4. 插槽作用域:slot(插槽)在组件模板中,使用数据是当前组件的数据,组件标签在父组件的模板中调用,里面使用的数据是父组件的。

1. 有时候让插槽里面的内容能够访问子组件里的数据是很有用的。

2. 在组件标签中 我想使用子组件的 name 但这个name是实例对象的父组件的,因为组件标签在实例对象模板中。

3。 为了让 user 在父级的插槽使用,我们将 user 作为<slot>插槽元素的一个特性绑定上去。

4. 我们可以给 v-slot 带一个值,来定义我们提供的插槽 prop。

需求:组件标签(父组件)使用自己(子组件)组件中的数据?

1. 将子组件的数据绑定到插槽标签 <slot>上

绑定在 slot 的 u 都存在插槽里的叫 prop 对象,要用 v-slot=“yh” 定义一个 prop对象,这个,yh就是定义 prop对象,而这个对象上存的就是子组件的数据。

绑定在 slot 上的属性,会形成一个 prop对象,用 v-slot 来定义这个prop对象。

2. 在组件标签上用 v-slot = “users” users 就是这个 prop对象了。

{{ users.u }}  就是 user 对应的 “张三” 数据

插槽注意点:

* 可以打乱顺序,给名字对应上就可以

* 组件标签里面的 v-slot:xx,后面绑定的名称要和模板里的对应。

* 如果不写 v-slot就不出

作者:晋飞翔

手机号(微信同步):17812718961

希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!

vue学习指南:第九篇(详细) - Vue的 Slot-插槽的更多相关文章

  1. Java工程师学习指南 完结篇

    Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...

  2. Java工程师学习指南 中级篇

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...

  3. Java工程师学习指南 初级篇

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  4. Java工程师学习指南 入门篇

    Java工程师学习指南 入门篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  5. vue学习指南:第二篇(详细Vue基础) - Vue的指令

    一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...

  6. vue学习指南:第七篇(详细) - Vue的 组件通信

    Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用  缩写是(:) 1.创建子组件,在src/ ...

  7. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  8. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. Vue学习【第一篇】:Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

随机推荐

  1. python中集合

    去重 无序 没有索引 #remove 删除元素 >>> s1 = {1,2,3,4,5} >>> s1.remove(2) >>> print(s ...

  2. nRF24L01+如何检测信道被占用-RSSI寄存器实战分享

    检测信道占用的需求场景 在使用nRF24L01模块做一对多或多对一的组网通信中,大家都会担心一个问题就是在发送的时候,希望不要有其他的模块也进行发送,因为这样就会使无线信号发生碰撞,信道被堵塞,造成通 ...

  3. [b0006] Spark 2.0.1 伪分布式搭建练手

    环境: 已经安装好: hadoop 2.6.4  yarn 参考: [b0001] 伪分布式 hadoop 2.6.4 准备: spark-2.0.1-bin-hadoop2.6.tgz 下载地址:  ...

  4. 字符串和id的转换方法

    在项目中经常会遇到一个需求就是字符串和id的转换,比如标签和标签id.因为在存储系统里面存储字符串会比较浪费内存,而存储id会节省内存和提高效率. 问题分解 通过字符串获得id 通过id获得字符串 实 ...

  5. [PHP] PHP PDO与mysql的连接单例防止超时情况处理

    这个数据库类主要处理了单例模式下创建数据库对象时,如果有两次较长时间的间隔去执行sql操作,再次处理会出现连接失败的问题,利用一个cache数组存放pdo对象与时间戳,把两次执行之间的时间进行了比较, ...

  6. 3、mongoDB索引

    创建索引: db.imooc_collection.getIndexes() 查看索引情况 db.imooc_collection.ensureIndex({x:1}) 创建索引,x:1代表正向排序, ...

  7. 6.1 Spark SQL

    一.从shark到Spark SQL Hive能够把SQL程序转换成map-reduce程序   可以把Hadoop中的Hive看作是一个接口,主要起到了转换的功能,并没有实际存储数据. Shark即 ...

  8. Centos 7 LAMP+wordpress

    一.简介        LAMP--->Linux(OS).Apache(http服务器),MySQL(有时也指MariaDB,数据库) 和PHP的第一个字母,一般用来建立web应用平台. 它是 ...

  9. Html学习之十三(导航栏的制作)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. Unity Glossary

    https://docs.unity3d.com/2018.4/Documentation/Manual/Glossary.html 2D terms 2D Physics terms AI term ...