vue slot撸一撸

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

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

 <div id="app">  
    <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 id="app">  
    <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 id="app">  
    <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> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章