10. solt 插槽

solt ：

　　定义slot:(目的，有配置，没配置走默认)

　　引入子组件，如果不定义某个默认的结构或者样式，那么直接写子组件的名称即可

　　如果要自定义:

　　　　1.子组件必须为双标签。

　　　　2.子组件内写上自定义的结构或者样式并且加上slot的属性，而这个属性名要对应默认slot的名字

　　　　3.在子组件中，包一个slot的元素，可以任意修改，在slot元素上定义一个叫做name的属性，为了好对应操作

例子：

//DOM部份
<div id="app">
       <ppa>      //有配置 。显示的内容会按照默认的顺序显示，但内容会显示配置的内容
　　　　　　<div slot="content">修身</div> 
　　　　　　<div slot="footer">修脚</div> 
　　　　　　<div class="xob" slot="box"></div> 
　　　　</ppa> 
</div>

//script 部份
Vue.component('ppa',{
        template:` //有默认 。 显示的内容会按照默认的顺序显示，但内容会显示配置的内容
            <div>
                <slot name="box">
                    <div class="box" ></div>   
                </slot> 
                <slot name="content">
                    <div>中间的内容</div>   
                </slot> 
                <slot name="footer">
                    <div>底部的内容</div>   
                </slot> 
            </div>
        `
    });
    
    new Vue({
        el:'#app'
    });

 

转载于:https://www.cnblogs.com/MrZhujl/p/10241682.html