Vue作用域插槽
前面我们说了插槽的内容替代可以使用slot进行,根据不同name的插槽修改内容,但有时候我们希望复用的插槽样式也不近相同要从父组件传递!那么就引入了局部插槽!
我们利用v-for插槽使用!
定义一个插槽
Vue.component('child',{
template:`
<ul>
<li v-for="item of list" >
<slot>{{item}}</slot>
</li>
</ul>
`,
data:function(){
return {
list:[1,3,8,9,5,"哈哈",5,"守塔"]
}
}
})此情况下就不能修改样式了!我们希望渲染出来的效果与slot中的不近一样,那么就有了作用域插槽的用武之地!
我们简单修改一下组件的模板
template:`
<ul>
<li v-for="item of list" >
<slot :item="item">{{item}}</slot>
</li>
</ul>`我们给slot绑定一个数据,就是用于循环list的每一项,在组件调用时候绑定一个slot-scope
<child >
<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
</child>这个slot-scope的属性随便定义,这个对象下面存在刚才传递给slot(组件定义的时候)item,通过这个对象下item调取循环的内容!slot-scope需要定义在template组件上(渲染时候不会有该标签),但是在Vue2.5+以后不需要定义在tempalate上,但是那个标签会出现在dom结构中!
在局部插槽中也可以随意添加字符串,这种情况下slot是不行的,作用域插槽就展现特点了!
<child >
<template slot-scope="props">
<h1>{{props.item}}~~~~~~很棒</h1>
</template>
</child>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-9-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
