关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">  
    <children>  
        <span>我是父组件放在自组件中的,没有slot我不会显示</span>
    </children>  
</div>  

...

var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    
                template: "<button>我是一个没有slot的子组件模板</button>"  
            }
        }  
    });  

直接运行会输出如下:

这里并没有显示children组件中的span内容,如果想显示span怎么办?那就是使用在组件模板中使用slot进行span内容的一个分发:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">  
    <children>  
      <span>我是父组件放在自组件中的,没有slot我不会显示</span>
    </children>
</div>

...

var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    
                template: "<button><slot></slot>我是一个没有slot的子组件模板</button>"
            }
        }  
    });  

这回显示如下:

说明span的内容作为button的子标签已经显示ok,那么问题来了,如果我们有好几slot怎么办,父组件可能同时会在子组件中放置多个span标签,比如下面这种:

<div id="app">  
    <children>  
      <span>我是父组件放在自组件中的slot11111111111111</span>
      <span>我是父组件放在自组件中的slot22222222222222</span>
    </children>
</div>

在子组件中需要选择性的显示第一个span还是第二个span,怎么办?直接这样试试:

var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    
                template: "<button><slot></slot>我是一个没有slot的子组件模板<slot></slot></button>"
            }
        }  
    });  

以上写法肯定是错误的,这样写的话相当于没有区分两个span,这样在slot分发的时候会将两个span标签内容当做一个标签合并插入2处slot位置那里,正确的做法是为slot指定name属性:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">  
    <children>  
      <span slot="1">我是父组件放在自组件中的slot11111111111111</span>
      <span slot="2">我是父组件放在自组件中的slot22222222222222</span>
    </children>
</div>

...

var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    
                template: "<button><slot name='1'></slot>我是一个没有slot的子组件模板<slot name='2'></slot></button>"
            }
        }  
    });  

以上才可正确输出如下:

对于以下情景我们再测试下:

1、子组件模板中指定name属性的slot不存在:

<div id="app">  
    <children>  
      <span slot="3">我是父组件放在自组件中的slot11111111111111</span>
      <span slot="2">我是父组件放在自组件中的slot22222222222222</span>
    </children>
</div>
...
var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    
                template: "<button><slot name='1'></slot>我是一个没有slot的子组件模板</button>"
            }
        }  
    });  

当在children内找不到匹配的slot时,相当于该slot无效,即以上两个span均不会显示:

2、子组件模板中指定name属性的slot存在,但是父组件注入的另一个slot没有使用的情况:

<div id="app">  
    <children>  
      <span slot="3">我是父组件放在自组件中的slot11111111111111</span>
      <span slot="2">我是父组件放在自组件中的slot22222222222222</span>
    </children>
</div>
...
var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    
                template: "<button><slot name='2'></slot>我是一个没有slot的子组件模板</button>"
            }
        }  
    });  

同样地,相当于该具名slot没有生命而已,即slot等于3的span不会显示:

以上我们共使用了两种slot,没有指定name属性的slot为“单个slot”,指定了name属性的slot称作为“具名slot”,具名slot会查找相应的slot属性相同的父组件内容进行匹配

slot的差不多就这么多吧,后续看到了再补充。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

1100
来自专栏xingoo, 一个梦想做发明家的程序员

用vc++做滚动条控件

  首先用应用向导产生一名为scro的基于对话框的应用,再利用对话框编辑器加入两个一样的水平滚动条,两个滚动条的id分别取idc—scr1和idc—scr2,结...

1947
来自专栏西安-晁州

关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

1512
来自专栏python3

tkinter -- Frame

...

841
来自专栏进击的君君的前端之路

事件

1853
来自专栏Google Dart

AngularDart Material Design 扩展面板 顶

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

932
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.2K4
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb01轻松掌握HTML(Java真正的全栈开发)

? html 一.html介绍: 全称为HyperText Markup Language,译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用...

3845
来自专栏杨龙飞前端

页面重绘和回流(重排)以及优化

2004
来自专栏十月梦想

vue入门基础详解之组件元素不对应以及ref用法

在我们使用table时候,table的结构是table>tbody>tr>td,但是我们之间在table下面定义一个包含详情的组件,在table下使用多个会出现...

1512

扫码关注云+社区

领取腾讯云代金券