组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,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的内容保持不变!呈现默认内容!