知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    vue slot的scope傳遞

    作者:佳明媽 來源:云計算 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傳遞-最新評論

    福利彩票排列7走势图