元件的内容一般是在子元件中直接聲明的,那麼我們能不能再父元件進行自己去定義内容進行渲染呢?當然是可以的,slot就提供了極大的便利!下面看一下slot用法!
定義一個cont的元件
Vue.component('cont',{
template:`
<div>
<p> <slot name="top">頭部</slot></p>
<p><slot name="con"><h1>這是預設内容區域</h1></slot></p>
<p><slot name="button ">底部</slot></p>
</div>
`
}) 複制
在元件的模闆中進行插入slot,每個slot指定一個name,在前前台調用時候,使用加上一個屬性 slot=剛才設定的name可以進行設定不同的内容
<cont>
<div slot="con">這是新增内容</div>
</cont> 複制
看一下剛才的元件模闆的slot的内容,是當元件不修改這個slot的内容保持不變!呈現預設内容!