solt 插槽 内容分发

什么是插槽
  • Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口。
  • 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就显示在什么位置。我们可以理解slot为要占出当前的位置,方便我们插入内容。或者可以这样理解:要去吃饭了,儿子先去占座,然后等他爸爸来了再一起吃。
用法
  1. 默认插槽,匿名插槽:无name属性,只能用一次
    Vue.component("child",{
template:`<div>
111111
<slot></slot>
2222222
<slot></slot>
3333333
<slot></slot>
</div>
`
})
 <div id="box">
<child>
<div>联通卡</div>
<div>移动卡</div>
<div>电信卡</div>
</child>
</div>
  1. 具名插槽:slot属性对应的内容都会和组件中name一一对应
Vue.component("child",{
template:`<div>
111111
<slot name="a"></slot>
2222222
<slot name="b"></slot>
3333333
<slot name="c"></slot>
</div>
`
})
//slot="" 与子组件中name一致
<div id="box">
<child>
<div slot="a">联通卡</div>
<div slot="b">移动卡</div>
<div slot="c">电信卡</div>
</child>
</div>
  1. 作用域插槽 : 组件上的属性,可以在组件元素内使用
//slot-scope
<child>
<template slot-scope="he"> {{he}}
</template>
<template slot-scope="a"> {{a}}
</template>
<template slot-scope="e"> {{e}}
</template>
</child>
Vue.component('child',{
template:`
<div>
<slot say="hehe"></slot>
<slot a="a"></slot>
<slot 1="1"></slot>
</div>
`
})
//页面显示结果 : { "say": "hehe" } { "a": "a" } { "1": "1" }
新slot v-slot
  • 缩写 #名字
  • 与之前版本的用法一样,v-solt用在template标签上
 <div id="box">
<child>
<template v-slot:a>
<div>联通卡</div>
</template>
<template v-slot:b>
<div>移动卡</div>
</template>
<template #c>
电信卡
</template>
</child>
</div>
      Vue.component("child",{
template:`<div>
111111
<slot name="a"></slot>
2222222
<slot name="b"></slot>
3333333
<slot name="c"></slot>
</div>
`
})

vue 插槽 ------ slot 简单理解的更多相关文章

  1. vue插槽slot的理解与使用

    一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...

  2. vue 插槽slot总结 slot看这篇就够了

    一直模糊所以梳理一下,看了好多篇园友的文章和官网文档在这整理一下 默认插槽 //slot组件<template> <div class="slots"> s ...

  3. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

  4. vue 插槽slot

    本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...

  5. Vue插槽 slot

    1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...

  6. Vue插槽slot理解与初体验 ~

    一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...

  7. Vue slot简单理解

    情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child',{ template:`<div ...

  8. Vue 插槽 slot的简单实用

  9. Vue插槽的深入理解和应用

    一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...

随机推荐

  1. 关于Itext 报错-java.lang.NoClassDefFoundError: org/bouncycastle/asn1/ASN1Encodable

    如果我们在用iText 做为java 为PDF 文档加水印的时候 报如下异常 java.lang.NoClassDefFoundError: org/bouncycastle/asn1/ASN1Enc ...

  2. Netty快速入门(01)Linux I/O模型介绍

    Netty简述 Netty是一个高性能的网络编程框架. 上面提到了几个关键的字眼,高性能,网络编程,框架.这些概括Netty的本质. Netty是一个NIO客户端服务器框架,可以快速轻松地开发协议服务 ...

  3. JWT(二):使用 Java 实现 JWT

    JWT(一):认识 JSON WebToken JWT(二):使用 Java 实现 JWT 介绍 原理在上篇<JWT(一):认识 JSON Web Token>已经说过了,实现起来并不难, ...

  4. IPython的介绍与使用

    1.IPython简介 ipython是一个python的交互式shell,比默认的python shell好用得多,支持变量自动补全,自动缩进,支持bash shell命令,内置了许多很有用的功能和 ...

  5. 2020 年了,Java 日志框架到底哪个性能好?——技术选型篇

    大家好,之前写(shui)了两篇其他类型的文章,感觉大家反响不是很好,于是我乖乖的回来更新硬核技术文了. 经过本系列前两篇文章我们了解到日志框架大战随着 SLF4j 的一统天下而落下帷幕,但 SLF4 ...

  6. cogs 293. [NOI 2000] 单词查找树 Trie树字典树

    293. [NOI 2000] 单词查找树 ★★☆   输入文件:trie.in   输出文件:trie.out   简单对比时间限制:1 s   内存限制:128 MB 在进行文法分析的时候,通常需 ...

  7. PBFT && RBFT算法流程

    PBFT && RBFT算法流程以及其实现(上) 这篇文章主要是讲一下RBFT中共识算法流程以及节点的加入的流程.在下一篇博客中,将使用Java实现该算法. 传统的PBFT算法无法动态 ...

  8. sql server 新建用户 18456

    麻辣各级,今天阴沟里翻船 了,自己在家创建sqlserver新的用户名,一直报错  18456 邮件添加用户名这一套下来是没错. 重要是这样===>要重新启动一下sql server,就ok了. ...

  9. 一个按键搞定日常git操作

    Git is a free and open source distributed version control system designed to handle everything from ...

  10. python 验证客户端的合法性

    目的:对连接服务器的客户端进行判断 # Server import socket import hmac import os secret_key = bytes('tom', encoding='u ...