1. 程式人生 > 其它 >【Vue2】插槽

【Vue2】插槽

插槽還是比較重要,需要單獨再拎出來學習理解一下。之前寫的隨筆感覺自己理解了,發現遠遠不夠。

    1.作用:讓父元件向子元件指定位置插入html結構(元件拆分時),也是一種元件間通訊的方式,使用於父元件 ===> 子元件(props反向配置)     2.分類:預設插槽、具名插槽、作用域插槽     3.使用方式           1.預設插槽             父元件                   <Category>                     <div>html結構</div>                   </Category>
            子元件                   <template>                     <div>                       <!-- 定義插槽 -->                         <slot>插槽預設內容</slot>                     </div>                   </template>            2.具名插槽              父元件                   <Category slot="center">
                      <div>html結構1</div>                   </Category>                   <Category v-slot:footer>                       <div>html結構2</div>                   </Category>             子元件                   <template>                     <div>
                      <!-- 定義插槽 -->                         <slot name="center">插槽預設內容...</slot>                         <slot name="footer">插槽預設內容...</slot>                     </div>                   </template>             3.作用域插槽                 1.理解:資料在元件自身,但根據資料生成的結構需要的元件的使用者來決定。(games資料在Category元件中,但使用資料所遍歷出來的結構由App元件決定)                 2.具體編碼: