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' });