谷歌宣佈將在假日季推出 iOS 版谷歌地圖新功能:可提醒使用者周邊擁擠地區等
阿新 • • 發佈:2021-11-18
-
作用:讓父元件可以向子元件指定位置插入HTML結構,也是一種元件通訊的方式,適用於 父元件==>子元件。
-
分類:預設插槽、具名插槽、作用域插槽
-
使用方式:
- 預設插槽
父元件: <Son> <div>html結構</div> </Son> 子元件: <template> <div> <!--定義插槽--> <slot>插槽預設內容</slot> </div> </template>
- 具名插槽
父元件: <Son> <template slot="center"> <div>html結構1</div> </template> <!--v-slot僅適用於templat標籤和元件標籤--> <template v-slot:footer> <div>html結構2</div> </template> </Son> 子元件: <template> <!--定義插槽--> <slot name="center">插槽預設內容</slot> <slot name="footer">插槽預設內容</slot> </template>
-
作用域插槽
-
理解: 資料在定義插槽的元件自身,但根據資料生成的結構需要元件的使用者來決定(資料films在Son元件中,但使用資料遍歷出來的結構由App元件決定)
-
具體編碼
父元件: <Son> <!-- scope的值接收物件,子元件中slot標籤可能傳遞多個數據,物件點屬性名即可獲取對應的資料,scope支援解構賦值 scope舊的API slot-scope新的API 兩者使用方式一致 --> <template scope="scopeData"> <!--生成的是ul列表--> <ul> <li v-for="f in scopeData.films" :key="f">{{f}}</li> </ul> </template> </Son> <Son> <template slot-scope="{{films}}"> <!--生成的是h4標籤--> <h4 v-for="f in films" :key="f">{{f}}</h4> </template> </Son> 子元件 <template> <div> <slot :films="films"></slot> </div> </template> <script> export default{ name:'Son', //資料在子元件自身 data(){ return{ films: ["這個殺手不太冷", "我和我的祖國", "建軍大業", "懸崖上的金魚姬"] } } } </script>
-