利用vue3怎么實現(xiàn)一個switch功能組件-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關利用vue3怎么實現(xiàn)一個switch功能組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站設計、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的臨桂網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

先來看看我們希望用戶是如何使用 Switch 的

用 js 的方式來對比一下：

用戶可以通過一個 VSwitch 組件來應用 switch 功能

通過 case 來確定匹配的條件

然后每一個 case 匹配的條件用 template 來表示

這樣我們已經(jīng)規(guī)定好用戶該如何使用了，剩下的其實就是實現(xiàn)了

這一步背后的思想就是確定組件的規(guī)格，也可以說是確定組件的使用接口

how

那么我們應該如何實現(xiàn)呢？

我們先來思考一下 switch 的功能

拆分 Switch 功能

某個等于 case 值的那個模板顯示，別的都不應該顯示

舉個栗子：

case = "xiaohong" 時

那么就只能顯示名字為 "xiaohong" 的插槽

如果沒有匹配到任何一個 case ，并且還有 defalut 插槽時，顯示 defalut 插槽

當然，switch 還有更復雜的功能，我們這里先從最核心的功能入手，慢慢在復雜化（迭代思想）

實現(xiàn)原理

首先我們必須先知道該組件的 slots，都有哪些

在 vue3 中，我們只需要通過以下方式就可以輕松獲取 slots

setup(props,{slots}){
 console.log(slots)
}

如果打印 slots 的話，你會發(fā)現(xiàn)可以得到一個對象，而 key 的值就是 slot 的名稱，而 value 是一個函數(shù)，調(diào)用這個函數(shù)就可以獲取到對應的 vnode。

那比如我想顯示 xiaohei 這個插槽要怎么做呢？

只需要這樣

 setup(props, { slots }) {
  
  return () => {
   return slots.xiaohei()
  };
 },

setup 除了可以返回一個對象，作為導出給 template 用的數(shù)據(jù)，還可以直接返回一個函數(shù)作為 render。

而 render 函數(shù)只要返回對應的 vnode ，那么最終就會被渲染到 view 上。

所以按照上面代碼的寫法的話最終會顯示 xiaohei slot 內(nèi)部的內(nèi)容

那當明白上述知識點后，我們在回來看看第一個功能

是不是只要我們把和 case 匹配的 slots 渲染出來即可

看代碼：

export default {
 props: ["case"],
 setup(props, { slots }) {
  console.log(slots);
  return () => {
   if (slots[props.case]) {
    return slots[props.case]();
   }
  };
 },
};

注意哦，一定要加條件判斷，因為很有可能是沒有對應的 slot 的

看，懂了原理之后是不是很輕松的實現(xià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"]();
   }
  };
 },
};

如果在第一個條件那沒有匹配到的話，肯定會到達第二個條件判斷，也就是 if (slots["default"])

接著就是如果有 default slot 的話，那么就返回即可

至此，你已經(jīng)實現(xiàn)了一個簡單的 Switch 功能組件了

總結(jié)

讓我們來總結(jié)總結(jié)你已經(jīng)學到了哪些知識點

• 設計組件時，先設計該組件的規(guī)則（接口）

• tasking 的思想，把大功能拆小，然后逐一擊破

• 在 vue3 中獲取 slots 的方式

• setup 不止可以返回對象，還可以返回一個函數(shù)，效果同 render 函數(shù)一樣

• render 函數(shù)返回的 vnode 最終會被渲染到 view 上

如果你學到的話，那么請用你的小手點個贊唄~~~

完整代碼

// 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>

關于利用vue3怎么實現(xiàn)一個switch功能組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章標題：利用vue3怎么實現(xiàn)一個switch功能組件-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article34/ddjgse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、自適應網(wǎng)站、商城網(wǎng)站、外貿(mào)網(wǎng)站建設、網(wǎng)站策劃、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)