zoukankan      html  css  js  c++  java
  • 关于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的差不多就这么多吧,后续看到了再补充。。。

  • 相关阅读:
    经验大奉献。收集您的经验之你用什么方法提高.NET网站的性能!
    [书]:asp.net 2.0 高级编程(微软技术丛书)
    VS 2008 快捷键
    [书]:《Improving ASP.NET Performance》提高系统性能
    [书]:<<软件工程导论>> 听说很好,不知是真的否.
    [转] C#编码好习惯,献给所有热爱c#的同志
    [书]:UML和模式应用
    在后台代码里写 JS语句.
    查看和修改MTU值
    Lucene.NET搜索多个索引文件
  • 原文地址:https://www.cnblogs.com/vipzhou/p/6640056.html
Copyright © 2011-2022 走看看