vue slot撸一撸

为什么80%的码农都做不了架构师？>>>   

vue使用过程中接触到slot，一番操作下有以下记录：

①单个：父组件引用子组件的时候，写在子组件中的内容插入到了子组件中的slot位置；

 <div >  
    <children>  
        <span>slot内容</span> 
        <!-- 如果在子组件中没有slot，则不显示 -->
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {  // 注册子组件，上方引用子组件中的span标签会替代子组件中的slot位置
                template: "<button><slot></slot>这里才是子组件真正的内容</button>"  
            }  
        }  
    });  
</script>  

②多个：放到不同的位置；

 <div >  
    <children>  
        <span slot="one">slot内容1</span>
        <span slot="two">slot内容2</span>
        <!-- 父组件引用时给标签添加slot属性,子组件渲染时设置name属性，值对应引用时的slot属性值 -->
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {  // 注册子组件，上方引用子组件中的span标签会替代子组件中的slot位置
                template: "<button><slot name="one"></slot>我的前面是第一个，后面是第二个<slot name="two"></slot></button>"  
            }  
        }  
    });  
</script> 

③子组件slot标签中有内容时，而父组件中的对应的slot也有内容时，则会被父组件中的替换；如果父组件中没有引用引用对应的slot时，则显示子组件中slot中的内容

 <div >  
    <children>  
        <span slot="one">slot内容1</span>
        
        <!-- 父组件引用时给标签添加slot属性,子组件渲染时设置name属性，值对应引用时的slot属性值 -->
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {  // 注册子组件，上方引用子组件中的span标签会替代子组件中的slot位置
                template: "<button><slot name="one">这里面有内容</slot>我的前面是第一个，后面是第二个<slot name="two">引用我的没有内容，所以我显示</slot></button>"  
            }  
        }  
    });  
</script>