Vue入门基础之组件插槽(slot)使用
组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,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的内容保持不变!呈现默认内容!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读