vue中插槽slot

当特定的组件需要向里面传入特定的标签和内容，或者需要重复添加相同的内容

-----slot插槽：给模块占好位置，当使用组件名称的时候，自动的填充html内的内容。

1、普通的slot

html:
<div id="app">
<child>
<p slot="header">我是头部</p>
<p slot="footer">我是底部</p>
</child>
</div>
Vue.component('child',{
template:`
<div>
<slot name="header"></slot>
<p>我是中间人</p>
<slot name="footer"></slot>
</div>
`
});
new Vue ({
el:'#app'
})

2、插槽作用域

slot-scope=“props” 是子组件传递给父组件接收的对象，把循环放在组件的插槽上，HTML的Dom直接展示数据。

//html
<div id="app">
<child>
<template   slot-scope="props">
<li>{{props.item}}{{props.index}}</li>
</template>
</child>
</div>
//做出循环
Vue.component('child',{
data:function(){
return{
arr:[1,2,3,4]
}
},
template:`
<div>
<p>开始循环</p>
<ul>
<slot v-for="item in arr" :item=item>
</slot>
</ul>
</div>
`
});
new Vue ({
el:'#app'
})

• 点赞 1
• 收藏
• 分享
• 文章举报

xd1918 发布了10 篇原创文章 · 获赞 12 · 访问量 256 私信 关注