前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue作用域插槽

Vue作用域插槽

作者头像
十月梦想
发布2018-10-09 15:22:02
1.4K0
发布2018-10-09 15:22:02
举报
文章被收录于专栏:十月梦想

前面我们说了插槽的内容替代可以使用slot进行,根据不同name的插槽修改内容,但有时候我们希望复用的插槽样式也不近相同要从父组件传递!那么就引入了局部插槽!

我们利用v-for插槽使用!

定义一个插槽

代码语言:javascript
复制
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中的不近一样,那么就有了作用域插槽的用武之地!

我们简单修改一下组件的模板

代码语言:javascript
复制
template:`
    <ul>
        <li v-for="item of list" >
            <slot :item="item">{{item}}</slot>
        </li>

    </ul>`

我们给slot绑定一个数据,就是用于循环list的每一项,在组件调用时候绑定一个slot-scope

代码语言:javascript
复制
<child >
    <template slot-scope="props">
        <h1>{{props.item}}</h1>
    </template>
</child>

这个slot-scope的属性随便定义,这个对象下面存在刚才传递给slot(组件定义的时候)item,通过这个对象下item调取循环的内容!slot-scope需要定义在template组件上(渲染时候不会有该标签),但是在Vue2.5+以后不需要定义在tempalate上,但是那个标签会出现在dom结构中!

在局部插槽中也可以随意添加字符串,这种情况下slot是不行的,作用域插槽就展现特点了!

代码语言:javascript
复制
<child >
    <template slot-scope="props">
        <h1>{{props.item}}~~~~~~很棒</h1>
    </template>
</child>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-9-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档