站長資訊網
        最全最豐富的資訊網站

        vue中有幾種插槽

        vue中有3種插槽:1、默認插槽,語法“<slot></slot>”;2、具名插槽,語法“<slot name="名稱"></slot>”;3、作用域插槽,語法“<slot :自定義name=data中的屬性或對象></slot>”。

        vue中有幾種插槽

        本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。

        vue的插槽(slot)主要分三種:

        默認插槽,具名插槽,作用域插槽

        vue中的插槽,指的是子組件中提供給父組件使用的一個占位符;
        用標簽表示,父組件可以在這個占位符中填充任何模板代碼,比如HTML、組件等,填充的內容會替換掉子組件的標簽(替換占位符)。

        默認插槽

        默認插槽是最簡單的一種插槽,和上面的描述一致,就是通過替換占位符達到在父組件中更改子組件中內容的效果。

        語法:<slot></slot>

        在子組件中放置一個占位符(slot):

        <template>     <span>         <span>莎莎減肥</span>         <slot></slot>     </span> </template>  <script> export default {     name: 'chassList' } </script>

        然后在父組件中引用這個子組件,并給這個占位符(slot)填充內容:

        <template>     <div>         <span>今天吃啥:</span>         <chassList>             <span>大嫂不讓莎莎吃飯</span>         </chassList>     </div> </template>

        這時頁面展現(xiàn)的內容會是【今天吃啥:莎莎減肥大嫂不讓莎莎吃飯】。

        具名插槽

        比如在子組件中有兩個要替換占位符的地方(兩個slot),這時父組件如果要將相應的內容填充到相應的插槽中,靠默認插槽是沒有辦法判斷相應的內容要填充到哪個插槽中的。為了應對這樣的場景,具名插槽應運而生。

        具名插槽,其實就是給子組件中的插槽取一個名字,而父組件就可以在引用子組件的時候,根據(jù)這個名字對號入座,將相應內容填充到相應的插槽中。

        語法:<slot name="名稱"></slot>

        在子組件中放置兩個具名插槽:

        <template>     <div>         <span>第一個插槽</span>         <slot name="one"></slot>         <span>第二個插槽</span>         <slot name="two"></slot>     </div> </template>  <script> export default {     name: 'chassList' } </script>

        在父組件中引用該子組件,并通過v-slot:[name]的方式將相應的內容填充到相應的插槽中:

        <template>     <div>         <span>兩個插槽:</span>         <chassList>             <template v-slot:one>                 <span>one,</span>             </template>             <template v-slot:two>                 <span>two</span>             </template>         </chassList>     </div> </template>

        這時頁面展示的內容會是【兩個插槽:第一個插槽one,第二個插槽two】。

        使用默認插槽和具名插槽的注意事項

        1.如果子組件中存在多個默認插槽,那么父組件中所有指定到默認插槽的填充內容(未指定具名插槽),會全部填充到子組件的每個默認插槽中。

        2.即使在父組件中將具名插槽的填充順序打亂,只要具名插槽的名字對應上了,填充的內容就能被正確渲染到相應的具名插槽中,一個蘿卜一個坑。

        3.如果子組件中同時存在默認插槽和具名插槽,但是在子組件中找不到父組件中指定的具名插槽,那么該內容會被直接丟棄,而不會被填充到默認插槽中。

        作用域插槽

        作用域插槽相比于前面的默認插槽和具名插槽,會比較難于理解和運用。

        • 前面的兩個插槽強調的是填充占位的【位置】;

        • 作用域插槽強調的則是數(shù)據(jù)作用的【范圍】;

        • 作用域插槽,就是帶參數(shù)(數(shù)據(jù))的插槽;

        在子組件的插槽中帶入參數(shù)(數(shù)據(jù))提供給父組件使用,該參數(shù)(數(shù)據(jù))僅在插槽內有效,父組件可以根據(jù)子組件中傳過來的插槽參數(shù)(數(shù)據(jù))對展示內容進行定制。

        語法:<slot :自定義name=data中的屬性或對象></slot>

        在子組件中放置一個帶參數(shù)(數(shù)據(jù))的插槽:

        <template>     <div>         <span>插槽中的參數(shù)值是</span>         <slot :isAllwo="isAllwo"></slot>     </div> </template>  <script> export default {     name: 'classList',     data() {         return {             isAllwo: {                 one: 'one',                 two: 'two'             }           }     } } </script>

        在父組件中引用該子組件,并通過slot-scope來接受子組件的插槽中傳過來的參數(shù)和使用該數(shù)據(jù)。

        <template>     <div>         <span>作用域插槽:</span>         <classList>             <template slot-scope="isAllwo">                 {{ isAllwo.isAllwo.one}}             </template>         </classList>     </div> </template>

        這時頁面展示的內容會是【作用域插槽:插槽中參數(shù)值是one】。

        因為在template的{{}}是支持表達式的,這個時候就可以利用子組件傳過來的參數(shù)值的不同進行頁面內容的定制。

        <template>     <div>         <span>作用域插槽:</span>         <classList>             <template slot-scope="isAllwo">                 {{ isAllwo.isAllwo.one|| '空值' }}             </template>         </classList>     </div> </template>

        這時,如果子組件中傳過來的參數(shù)是空值,頁面的展示內容就會是【作用域插槽:插槽中參數(shù)值是空值】。

        作用域插槽的使用場景多種多樣,在各種框架中的應用也是十分廣泛,比如ElementUI中的對表格的某一行或某一列進行展示內容的定制,就是作用域插槽的一個典型應用場景。

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国内精品伊人久久久久网站| 伊人久久无码精品中文字幕| 亚洲一区二区三区国产精品| 久久免费精品一区二区| 中文精品99久久国产 | 亚洲国产精品成人午夜在线观看 | 久久成人国产精品二三区| 亚洲精品国产美女久久久| 韩国三级中文字幕hd久久精品| 99久久国语露脸精品国产| 亚洲精品高清国产一线久久| 久久精品国产只有精品66| 99re66在线观看精品免费| 国产精品特级毛片一区二区三区| 真实国产乱子伦精品视频| 免费观看四虎精品成人| 精品亚洲欧美中文字幕在线看| 四虎影视国产精品永久在线| 国产福利在线观看精品| 久久精品天天中文字幕人妻 | 久久精品国产亚洲Aⅴ香蕉| Xx性欧美肥妇精品久久久久久| 国产精品久久毛片完整版| 精品国产乱码久久久久久郑州公司| 午夜三级国产精品理论三级| 精品福利一区二区三区精品国产第一国产综合精品 | 亚洲av午夜福利精品一区人妖| 久久亚洲国产成人精品无码区 | 国产亚洲综合成人91精品| 国产精品第12页| 国产精品v片在线观看不卡 | 精品乱码久久久久久夜夜嗨| 国产精品粉嫩美女在线观看| 99在线精品免费视频| 91麻豆精品国产91久久久久久| 久久精品九九亚洲精品天堂| 嫩草影院久久国产精品| 一区二区三区四区精品视频| 欧美黑人巨大精品| 91精品久久久久久无码| 精品无码久久久久久久久久|