VUE3 之 插槽的使用 – 這個系列的教程通俗易懂，適合新手
1. 概述
非理性定律告訴我們：
人們總是習慣於以情感去判斷眼前的事物，非理性的去做決定。
對於長遠的利益，人們更願意去選擇短期的利益。
因此在做決定前要讓自己冷靜，理性的分析，讓自己看的更遠。
言歸正傳，今天我們來聊一個新的概念 —— 插槽。
2. 插槽的使用
2.1 一個簡單的例子
我們先來看一個簡單的例子
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ template:` <div> <my-form /> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <button @click="myClick">提交</button> </div> ` }); const vm = app.mount("#myDiv");
這個例子很簡單，我們在子組件中寫了一個文本框，文本框的後面是一個按鈕，點擊按鈕會 alert 一個提示
2.2 父組件決定按鈕的樣式
如果我們希望子組件更靈活、復用性更強，子組件按鈕的樣式可以由父組件去改變，該怎樣做呢，我們看下面的例子
const app = Vue.createApp({ template:` <div> <my-form> <div>提交</div> </my-form> <my-form> <button>提交</button> </my-form> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <slot @click="myClick"></slot> </div> ` });
這裡我們使用了插槽（slot）的概念，父組件使用子組件時，組件標籤中間的部分就是插槽的內容，
例如：<my-form><div>提交</div></my-form> 中，<div>提交</div> 就是插槽的內容
子組件定義時，可以使用 <slot /> 獲取到父組件定義的插槽的內容
這個例子中，父組件使用了兩次 my-form 子組件，但按鈕的樣式是不同的。
但這個例子中有一個問題，我們會發現點擊【提交】按鈕沒有任何效果，這是因為 slot 標籤是不能直接綁定事件的，下面我們來解決這個問題
2.3 插槽綁定事件
slot 標籤不能直接綁定事件，通常的做法是在外層加一個 span 標籤，然後把事件綁定到 span 標籤上
const app = Vue.createApp({ template:` <div> <my-form> <div>提交</div> </my-form> <my-form> <button>提交</button> </my-form> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot></slot> </span> </div> ` });
2.4 子組件作為插槽的內容
插槽的內容，可以是普通標籤、普通字元串，也可以是其他的子組件
const app = Vue.createApp({ template:` <div> <my-form> <my-button /> </my-form> </div> ` }); app.component("my-button", { template: ` <div>my-button組件按鈕</div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot></slot> </span> </div> ` });
這個例子中，我們在 my-button 組件中定義了一個 div按鈕，然後在父組件中把 <my-button /> 作為插槽的內容，VUE 是支援的
2.5 插槽中使用數據
插槽中也是可以使用數據的
const app = Vue.createApp({ data() { return { buttonName : '提交' } }, template:` <div> <my-form> <div>{{buttonName}}</div> </my-form> <my-form> <button>{{buttonName}}</button> </my-form> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot></slot> </span> </div> ` });
這個例子中，插槽內容中的按鈕的名稱，取自父組件的數據 buttonName
2.6 插槽的默認值
如果父組件想省事，不想指定子組件的按鈕樣式，此時，就需要我們指定插槽的默認內容
const app = Vue.createApp({ data() { return { buttonName : '提交' } }, template:` <div> <my-form /> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot>默認提交按鈕</slot> </span> </div> ` });
指定插槽的默認內容很簡單，在子組件的 slot 標籤中間， 寫上默認內容即可，當父組件不指定插槽內容時，則使用該內容作為插槽內容
2.7 具名插槽
如果子組件分為 header、main、footer 3個部分，header 和 footer 由父組件決定，header 放在 main 的上方， footer 放在 main 組件的下方，該如何做呢，看下面的例子
const app = Vue.createApp({ data() { return { buttonName : '提交' } }, template:` <div> <my-html> <template v-slot:header> <div>header</div> </template> <template v-slot:footer> <div>footer</div> </template> </my-html> </div> ` }); app.component("my-html", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <slot name="header" /> <div>main</div> <slot name="footer" /> </div> ` });
首先，父組件使用子組件時，使用 template 標籤包住 header 的內容，在 template 標籤中使用 v-slot:header 為該部分插槽命名。
子組件中，使用 <slot name=”header” /> 指定插槽的位置。
footer 部分類似
3. 綜述
今天聊了一下 VUE3 的 插槽的使用，希望可以對大家的工作有所幫助，下一節我們繼續講組件的相關知識，敬請期待
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，每天更新Java乾貨。
4. 個人公眾號
追風人聊Java，歡迎大家關注
