Vue slot简单理解
情形一：
子组件定义了具名的slot，父组件使用具名的slot，slot显示顺序为子组件定义slot的顺序
子组件：
Vue.component('child',{
template:`<div class="child"><slot name="one"></slot><slot name="two"></slot></div>`
});父组件使用子组件：
<child>
<h1 slot="two" class="two">woshi two</h1>
<h2 slot="one" class="one">woshi one</h2>
</child>
显示顺序按照子组件slot定义的顺序。
情形二：
子组件定义了不具名的slot,父组件直接使用子组件，并可以直接在子组件中写内容
子组件：
Vue.component('btn',{
template:`<div class="button">
<slot></slot>
</div>`
});父组件：
<btn>
按钮
</btn>
情形三：
子组件slot中定义了默认内容，如果父组件引入了子组件，且不写内容，则显示子组件默认内容，子组件定义的默认内容也可以提前加任何样式或赋予任何标签。但是slot标签上不可以加任何样式。如果父组件引入定义了slot的子组件，并且赋予了内容，则子组件默认的slot中的标签与样式不会加上去。如果想要给slot加样式，要加在父组件上。
子组件：
Vue.component('aaa',{
template:`<div>
<slot><h1 style="color:red">woshi slot默认内容</h1></slot>
</div>`
});父组件：
<aaa></aaa>
<aaa><h6>哈哈哈哈哈</h6></aaa>
<aaa>哈哈哈哈哈</aaa>
vue dom元素挂载：
new Vue({
el:"#app"
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-09-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
