文档章节

占位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结构的时候大量使用

© 著作权归作者所有

共有 人打赏支持
上一篇: 作用域slot
下一篇: xxx
粉丝 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
TangYuan之Ognl设计

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

xson_org
2016/11/24
294
1

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
今天
4
0
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部