知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    vue slot的scope传递

    作者:bbin视讯真人娱乐平台登入 来源:云计算 2017-09-21 人气:
    vue slot的scope传递,要表述的意思组件中slot这个插槽上可以赋值各种属性,在调用组件的页面中可以使用template scope="props"来获取插槽上的属性值,获取到的值是一个对象

    vue slot的scope传递,暂时这么称呼这个标题,要表述的意思组件中slot这个插槽上可以赋值各种属性,在调用组件的页面中可以使用<template scope="props"> 来获取插槽上的属性值,获取到的值是一个对象。

    我们来看个demo

    页面中调用list组件,这里不需要关注组件到底是怎么写的,数据到底是啥,只要关注 <template scope="scope"> 以及数据调用情况{{scope.row.name}},
    <list :data="listData" class="img-list">
            <template scope="scope">
                <div class="info">
                    <p>数据:{{scope}}</p>
                    <p>索引:{{scope.$index}}</p>
                    <p>姓名:{{scope.row.name}}</p>
                    <p>性别:{{scope.row.sex}}</p>
                </div>
            </template>
    </list>
    list组件中的slot是这样子的:
    <ul>
    <li v-for="(item,i) in data">
       <slot :row="item" :$index="i"></slot>
    </li>
    </ul>
    注意:<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }对比这个对象就明白上面调用是咋回事了。
    vue slot的scope传递这种东西有啥用?
    就是在那种传入结构不确定,会经常变得情况是非常好用的。

    vue slot的scope传递组件嵌套也是可以传递的

    比如可以把上面的list组件中再引入一个子组件
    <ul>
    <list-item v-for="(item,i) in data">
       <slot :row="item" :$index="i">00</slot>
    </list-item>
    </ul>
    不过要记住:list组件里面和调用list组件的页面中都要引入list-item子组件,否则报错。

    vue slot的scope传递值是父作用域中的源数据改变,值会同步改变


    ↓ 查看全文

    vue slot的scope传递由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    vue slot的scope传递-最新评论

    网站地图 ag旗舰厅直营网登入 bbin视讯真人百家乐登入 ag视讯现金网登入
    申博亚洲客户端 太阳城集团彩票游戏 菲律宾申博直营网 菲律宾申博亚洲
    联众彩票网 365外围官网 菲律宾申博红太阳娱乐登入 668彩票娱乐
    ag视讯平台登入 bbin视讯娱乐在线登入 ag视讯代理登入 ag旗舰厅游戏登入
    ag旗舰厅直营网登入 ag旗舰厅游戏网站登入 bbin视讯娱乐在线登入 ag旗舰厅直营登入
    517XTD.COM XSB587.COM 8RQS.COM 1112932.COM 1112125.COM
    381sunbet.com 716SUN.COM S618K.COM 517XTD.COM 0888tyc.com
    XSB798.COM 778DC.COM 15jbs.com 11sbsun.com 858XTD.COM
    984SUN.COM 616jbs.com 8TFS.COM 787cw.com 917SUN.COM