what
編程語(yǔ)言里面，除了使用 if 語(yǔ)句來(lái)做條件判斷，還有另外一個(gè)常用的就是 switch 了。
而在 vue 中，官方已經(jīng)幫助我們實(shí)現(xiàn)了 v-if 這個(gè)指令，但是還沒(méi)有 switch ，那我們能不能自己實(shí)現(xiàn)一個(gè)呢？
這篇文章就是來(lái)探索這個(gè)問(wèn)題，并且最終實(shí)現(xiàn)一個(gè) Switch 組件
以終為始
先來(lái)看看我們希望用戶(hù)是如何使用 Switch 的
用 js 的方式來(lái)對(duì)比一下：
用戶(hù)可以通過(guò)一個(gè) VSwitch 組件來(lái)應(yīng)用 switch 功能
通過(guò) case 來(lái)確定匹配的條件
然后每一個(gè) case 匹配的條件用 template 來(lái)表示
這樣我們已經(jīng)規(guī)定好用戶(hù)該如何使用了，剩下的其實(shí)就是實(shí)現(xiàn)了
這一步背后的思想就是確定組件的規(guī)格，也可以說(shuō)是確定組件的使用接口
how
那么我們應(yīng)該如何實(shí)現(xiàn)呢？
我們先來(lái)思考一下 switch 的功能
拆分 Switch 功能
某個(gè)等于 case 值的那個(gè)模板顯示，別的都不應(yīng)該顯示
舉個(gè)栗子：
case = "xiaohong" 時(shí)
那么就只能顯示名字為 "xiaohong" 的插槽
如果沒(méi)有匹配到任何一個(gè) case ，并且還有 defalut 插槽時(shí)，顯示 defalut 插槽
當(dāng)然，switch 還有更復(fù)雜的功能，我們這里先從最核心的功能入手，慢慢在復(fù)雜化（迭代思想）
實(shí)現(xiàn)原理
首先我們必須先知道該組件的 slots，都有哪些
在 vue3 中，我們只需要通過(guò)以下方式就可以輕松獲取 slots
setup(props,{slots}){
console.log(slots)
}
如果打印 slots 的話(huà)，你會(huì)發(fā)現(xiàn)可以得到一個(gè)對(duì)象，而 key 的值就是 slot 的名稱(chēng)，而 value 是一個(gè)函數(shù)，調(diào)用這個(gè)函數(shù)就可以獲取到對(duì)應(yīng)的 vnode。
那比如我想顯示 xiaohei 這個(gè)插槽要怎么做呢？
只需要這樣
setup(props, { slots }) {
return () => {
return slots.xiaohei()
};
},
setup 除了可以返回一個(gè)對(duì)象，作為導(dǎo)出給 template 用的數(shù)據(jù)，還可以直接返回一個(gè)函數(shù)作為 render。
而 render 函數(shù)只要返回對(duì)應(yīng)的 vnode ，那么最終就會(huì)被渲染到 view 上。
所以按照上面代碼的寫(xiě)法的話(huà)最終會(huì)顯示 xiaohei slot 內(nèi)部的內(nèi)容
那當(dāng)明白上述知識(shí)點(diǎn)后，我們?cè)诨貋?lái)看看第一個(gè)功能
是不是只要我們把和 case 匹配的 slots 渲染出來(lái)即可
看代碼：
export default {
props: ["case"],
setup(props, { slots }) {
console.log(slots);
return () => {
if (slots[props.case]) {
return slots[props.case]();
}
};
},
};
注意哦，一定要加條件判斷，因?yàn)楹苡锌赡苁菦](méi)有對(duì)應(yīng)的 slot 的
看，懂了原理之后是不是很輕松的實(shí)現(xiàn)第一個(gè)功能了。
我們?cè)趤?lái)看第二個(gè)功能的時(shí)候是不是也很簡(jiǎn)單了
只需要在加一段代碼即可：
export default {
props: ["case"],
setup(props, { slots }) {
console.log(slots);
return () => {
if (slots[props.case]) {
return slots[props.case]();
}
if (slots["default"]) {
return slots["default"]();
}
};
},
};
如果在第一個(gè)條件那沒(méi)有匹配到的話(huà)，肯定會(huì)到達(dá)第二個(gè)條件判斷，也就是 if (slots["default"])
接著就是如果有 default slot 的話(huà)，那么就返回即可
至此，你已經(jīng)實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的 Switch 功能組件了
總結(jié)
讓我們來(lái)總結(jié)總結(jié)你已經(jīng)學(xué)到了哪些知識(shí)點(diǎn)
- 設(shè)計(jì)組件時(shí)，先設(shè)計(jì)該組件的規(guī)則（接口）
- tasking 的思想，把大功能拆小，然后逐一擊破
- 在 vue3 中獲取 slots 的方式
- setup 不止可以返回對(duì)象，還可以返回一個(gè)函數(shù)，效果同 render 函數(shù)一樣
- render 函數(shù)返回的 vnode 最終會(huì)被渲染到 view 上
如果你學(xué)到的話(huà)，那么請(qǐng)用你的小手點(diǎn)個(gè)贊唄~~~
完整代碼
// VSwitch.vue
<script>
export default {
props: ["case"],
setup(props, { slots }) {
return () => {
if (slots[props.case]) {
return slots[props.case]();
}
if (slots["default"]) {
return slots["default"]();
}
};
},
};
</script>
擴(kuò)展思考
那其實(shí)這里實(shí)現(xiàn)的 switch 功能并不完整，如果說(shuō)用戶(hù)匹配滿(mǎn)足多個(gè)條件呢？并且沒(méi)有 break，那么我們是不是應(yīng)該把匹配到的 template 都顯示出來(lái)呢？
自己嘗試一下實(shí)現(xiàn)看看？
到此這篇關(guān)于vue3中輕松實(shí)現(xiàn)switch功能組件的文章就介紹到這了,更多相關(guān)vue3實(shí)現(xiàn)switch功能組件內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6914198729482305550
