文档章节

占位slot

 金于虎
发布于 06/22 15:11
字数 642
阅读 4
收藏 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
Vue技术栈仿写的Tabler

Qabler 参考Tabler的项目,使用Vue技术栈来实现。求一波Star,谢谢!Github地址:github.com/QianGuoqing… 效果图 (效果图是动态图,如果图片静止请点击图片查看) Home Interface/Cards De...

杏花微雨
07/24
0
0
Web Components 原生组件 Trends

在现在前端组件化开发大行其道的今天,各种Framework让人眼花缭乱,同一个公司,不同团队,可能使用的是不同的框架。那么在统一视觉,交互,功能上,不同的框架可以都需要用不同的框架开发一...

Jason_To
07/22
0
0
MYSQL到底区分字符占位不?

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

mako
2011/11/19
281
1
  &.nbsp;在IE和谷歌浏览器中不兼容的解决办法

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

菜鸟来了
2015/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

利用碎片化时间Get Linux系统

起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫。我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选择,迷茫工作或者生...

linuxprobe16
今天
5
0
OSChina 周日乱弹 —— 恨不得给你买张飞机挂票

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席灵魂师:分享张希/曹方的单曲《认真地老去》 来不及认真的年轻过,就认真的老去! 《认真地老去》- 张希/曹方 手机党少年们想听...

小小编辑
今天
287
6
如何实现靠谱的分布式锁?

分布式锁,是用来控制分布式系统中互斥访问共享资源的一种手段,从而避免并行导致的结果不可控。基本的实现原理和单进程锁是一致的,通过一个共享标识来确定唯一性,对共享标识进行修改时能够...

郑加威
今天
3
0
Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
5
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部