组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力
1、插槽位置
/*
组件插槽:父组件向子组件传递内容
*/
Vue.component('alert-box',{
template:`
<div class="demo-alert-box"></div>
<strong>Error!</strong>
<slot>默认内容</slot>//插槽的位置
</div>
`
})
2、插槽内容
<alert-box>Someting bad happend.</alert-box>
注:父组件的内容“Someting bad happend”,将会渲染到插槽的位置,覆盖掉插槽的默认内容;如果父组件不传值, 则使用 slot 中的默认值;