文档章节

占位slot

 金于虎
发布于 06/22 15:11
字数 642
阅读 4
收藏 0
点赞 0
评论 0

一、为什么我们需要slot

假如我们有个需要,子组件中需要显示一段html内容,显示什么不是由子组件决定,而是由父组件传递什么决定,我们该怎么做

很挫的做法,我们使用组件间的数据传递

父组件向子组件传递数据,使用自定义属性绑定的方式[父组件自定属性,子组件接受自定义属性,我们就可以拿到值了]

	<div id="root">
		<child content="<p>hello world</p>"></child>
	</div>
    <script type="text/javascript">
    	Vue.component('child',{
    		props:['content'],
    		template: `<div>
    		   <p>hello</p>
    		   <div v-html="this.content"></div>
    		 </div>`
    	})

    	new Vue({
    		el:'#root'
    	})
    </script>

这样做的问题是:

  1. 子组件件件多多了一个div标签 <div v-html="this.content"></div> 这里的div不可以换成template,会无法渲染

  2. 传递的内容少还好,如果我们传递一大段html,这样做是不是很蠢,代码很难阅读

	<div id="root">
		<child content="<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>"></child>
	</div>

二、使用slot

<div id="root">
		<child><p>hello world</p></child>
	</div>
    <script type="text/javascript">
    	Vue.component('child',{
    		props:['content'],
    		template: `<div>
    		   <p>hello</p>
    		   <slot></slot>
    		   `
    	})

    	new Vue({
    		el:'#root'
    	})
    </script>

slot插槽处,就会被子组件中间的内容直接替换。 我们像子组件中插入了一点东西,需要有插入的地方,那个地方就叫做插槽。

三,slot默认值

<slot>默认值</slot>

slot中间的内容就是默认值,但我们不想插槽插入东西的时候,他就是显示默认值。

四,多个插槽(具名插槽)

当有多个插槽的时候,我们为了区分需要给插槽取个名字,也就是具备名字的插槽

slot属性

name属性

<div id="app">
      <contents>
         <div class="header" slot="header">header</div>
         <div class="footer" slot="footer">footer</div>
      </contents>
	</div>
   <script type="text/javascript">

      Vue.component('contents',{

         template:`
         <div >
         <slot  name="header"></slot>
         <div class="content">content</div>
         <slot  name="footer"></slot>
         </div>`,
          methods:{
            show:function(){
            }
         },
         mounted:function(){
           
         }

五,插槽的作用

总结: 插槽的作用:更方便的向子组件传递DOM元素

使用场景: 第三方插件中大量使用,比如element 父组件向子组件传递DOM结构的时候大量使用

© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 105
码字总数 42695
作品 0
曲靖
[虚拟机字节码执行引擎] 1 - 栈桢

本文主要内容 前言 运行时栈桢结构 已经学习了虚拟机内存区域、Class文件结构、类加载机制等知识,是时候学习虚拟机字节码执行过程了。 前言 虚拟机是一个相对物理机而言的概念,它们都有代码...

某昆
01/06
0
0
MYSQL到底区分字符占位不?

一直搞不懂,既然常说中文字符串占位是2,那如果MYSQL不区分占位的话,这个占位2到底是说在哪里? 我测试了MYSQL表,字符集无论是GBK 还是UTF8,中文字符串都是占位1, 请高手指教,详细点,...

mako
2011/11/19
281
1
TangYuan之Ognl设计

TangYuan之Ognl设计 前言: 本文中的内容需要读者对tangyuan框架和XCO对象有一定的了解和使用经验。如果您对此不太了解,可阅读下面两篇文件 通用数据对象XCO: 使用教程和技术设计: 1. 引子...

xson_org
2016/11/24
294
1
  &.nbsp;在IE和谷歌浏览器中不兼容的解决办法

直接在html文档中使用 来表示空格,在不同浏览器中的占位大小是不一样的. 为什么呢,因为不同浏览器默认的字体是不一样的,不同字体下的空格表示 占位大小不一致. 这就好办了嘛,我们对 指定...

菜鸟来了
2015/11/05
0
0
Redis-Cluster实战--2. 命令协议说明

转载请注明出处哈:http://carlosfu.iteye.com/blog/2240426 一:集群相关 cluster info 打印集群的信息 cluster nodes 列出集群当前已知的所有节点(node),以及这些节点的相关信息。 二:节点...

付磊-起扬
2015/09/12
0
0
PostgreSQL Failover slot - 支持将slot信息发送给物理备库

标签 PostgreSQL , slot , 备库 , failover 背景 PostgreSQL主库创建的slot(物理或逻辑的都算),在备库是否存在? 目前的版本,PG在主库创建的SLOT,备库是没有的(不会通过流复制协议复制...

德哥
06/21
0
0
Redis-trib.rb解析

Redis-trib.rb –create源码解析 一、 介绍   Redis-trib.rb为主流的Redis管理工具,对Redis一系列命令进行了封装通过ruby客户端完成Create Cluster,Reshard Cluster,Add Slave,Remove No...

Cruepan
03/23
0
0
boost源码剖析之:多重回调机制signal(上)

boost源码剖析之:多重回调机制signal(上) 刘未鹏 C++的罗浮宫(http://blog.csdn.net/pongba) boost库固然是技术的宝库,却更是思想的宝库。大多数程序员都知道如何应用command,observer等模...

长平狐
2012/08/28
799
0
UITextField中放置图片

------------------------------------------------------------------------------- 2016/1/23 23:22 更新日志: 系统的占位图方法 只能生效放一个, 不能同时显示左占位图和右占位图 ------...

阴雨音语
2016/01/21
475
0
SCTP 库的简述和代码 (4)

2 定时器 简单的时间轮. 使用时间轮是因为, 定时器数目可能比较大. 要求使用者周期性调用, ptimerwheel_hb 缺点是, 不精确. / Hash table for hold timer list / static listheader wheelslo...

jundai
2011/04/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
10分钟前
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
21分钟前
0
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
31分钟前
0
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
40分钟前
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
49分钟前
0
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
49分钟前
0
0
TensorFlow,从一个 Android Demo 开始

TensorFlow Android Demo 项目地址 Machine Learning 既然提到了 TensorFlow,那是不是得神经网络、机器学习了解下? 如果你能坚持把 机器学习速成课程 给啃完了,觉得还挺有兴趣的,那可以考...

孟飞阳
51分钟前
0
0
JVM学习笔记二:内存结构规范

1、JVM基本结构图 2、java堆(Heap) 3、方法区(Method Area) 4、程序计数器 5、JAVA栈图解 局部变量表:八大基本类型,还可以存储引用类型 上一篇:JVM学习笔记一:类加载机制介绍...

刘祖鹏
57分钟前
0
0
mui集成微信H5支付(返回白屏问题已经解决)

一.项目需求 因为公司人员缺少,没有专门开发安卓和ios的人员,为了项目尽早上线采用了混合APP开发的方式,我选择了MUI混合开发框架,项目中需要在用户购买VIP会员的时候进行支付,所以需要在项目...

银装素裹
今天
1
0
SpringBoot集成Redis--配置自定义的RedisCacheManager

配置自定义的RedisCacheManager--1自定义键生成规则 默认的键生成器 当不指定缓存的key时,SpringBoot会使用SimpleKeyGenerator生成key。 SimpleKeyGenerator SimpleKey 查看源码可以发现,它...

karma123
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部