1.背景
2.slot簡單使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>插槽slot簡單使用</h2> <pre> 1.定義:通俗的來說就是html中的變量,你可以理解爲html替換,他要實現的功能非常類型之前我們使用jquery的 $("#id").html('要替換的內容') 2.官方的定義大家自己百度 需求: 1. 定義一個組件; 2.組件內部的內容可以根據使用者替換 </pre> <hr> <h2>案例如下:</h2> <div id="app"> <c-child1></c-child1> ------------------------- <c-child1> <div>父類替換你的值</div> </c-child1> </div> <!--子組件模板1--> <template id="child1id"> <div> 我是一個子組件 <div> <slot>這是我的默認內容,使用者可以替換</slot> </div> </div> </template> <script> let app = new Vue({ el: '#app', // 組件 components: { 'c-child1': { template: '#child1id', } } }) </script> </body> </html>
3.具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>插槽slot-具名插槽</h2> <pre> 1.當多個插槽時,我們替換的內容到底替換那個插槽呢,這時候我們就需要給插槽去一個名字 2.可以利用slot 元素的一個特殊的特性：name來定義具名插槽 需求: 1. 定義一個組件; 2. 組件內3個插槽,分別爲網頁的頭部、主體、腳部 </pre> <hr> <h2>案例如下:</h2> <div id="app"> <c-child1> <div slot="header">填充頭部</div> <div slot="body">填充主體</div> <div slot="footer">填充腳部</div> </c-child1> </div> <!--子組件模板1--> <template id="child1id"> <div> <div> <slot name="header">頭部</slot> <slot name="body">主體</slot> <slot name="footer">腳部</slot> </div> </div> </template> <script> let app = new Vue({ el: '#app', // 組件 components: { 'c-child1': { template: '#child1id', } } }) </script> </body> </html>
4.父組件控制插槽中的數據顯示方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>插槽-實現子組件提供數據-父組件提供展示樣式</h2> <pre> 需求: 1. 提供一個子組件含插槽和一組數據; 2. 父組件控制數據在插槽中的顯示方式; 備註: 實際生產中子組件獲取到數據後,可能要在不同環境的父組件中做不同的展示 </pre> <hr> <h2>案例如下:</h2> <div id="app"> 展示方式一: <c-child1> <!-- slotProps2 可以自定義--> <template slot-scope="slotProps2"> <ul> <!-- slotProps2.data 取出插槽綁定在上面的data--> <li v-for="item in slotProps2.data">{{item}}</li> </ul> </template> </c-child1> ----------------------- <br> 展示方式二: <c-child1> <template slot-scope="slotProps2"> <ul> <li v-for="(item,index) in slotProps2.data">{{index+1}}-{{item}}</li> </ul> </template> </c-child1> </div> <!--子組件模板1--> <template id="child1id"> <div> <!-- 這裏的data不亂取名字,只能是data--> <slot :data="orderList"></slot> </div> </template> <script> let app = new Vue({ el: '#app', // 組件 components: { 'c-child1': { template: '#child1id', data() { return { orderList: ['書籍', '水果', '鍵盤', '水杯'] } } } } }) </script> </body> </html>
完美!