欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中輕松實現(xiàn)switch功能組件的全過程

 更新時間:2021年01月07日 09:35:16   作者:春去春又來  
這篇文章主要給大家介紹了關(guān)于vue3中輕松實現(xiàn)switch功能組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

what

編程語言里面,除了使用 if 語句來做條件判斷,還有另外一個常用的就是 switch 了。

而在 vue 中,官方已經(jīng)幫助我們實現(xiàn)了 v-if 這個指令,但是還沒有 switch ,那我們能不能自己實現(xiàn)一個呢?

這篇文章就是來探索這個問題,并且最終實現(xiàn)一個 Switch 組件

以終為始

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

用 js 的方式來對比一下:

用戶可以通過一個 VSwitch 組件來應(yīng)用 switch 功能

通過 case 來確定匹配的條件

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

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

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

how

那么我們應(yīng)該如何實現(xiàn)呢?

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

拆分 Switch 功能

某個等于 case 值的那個模板顯示,別的都不應(yīng)該顯示

舉個栗子:

case = "xiaohong" 時

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

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

當然,switch 還有更復(fù)雜的功能,我們這里先從最核心的功能入手,慢慢在復(fù)雜化(迭代思想)

實現(xiàn)原理

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

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

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

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

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

只需要這樣

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

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

而 render 函數(shù)只要返回對應(yīng)的 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]();
   }
  };
 },
};

注意哦,一定要加條件判斷,因為很有可能是沒有對應(yīng)的 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)學(xué)到了哪些知識點

  • 設(shè)計組件時,先設(shè)計該組件的規(guī)則(接口)
  • tasking 的思想,把大功能拆小,然后逐一擊破
  • 在 vue3 中獲取 slots 的方式
  • setup 不止可以返回對象,還可以返回一個函數(shù),效果同 render 函數(shù)一樣
  • render 函數(shù)返回的 vnode 最終會被渲染到 view 上

如果你學(xué)到的話,那么請用你的小手點個贊唄~~~

完整代碼

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

擴展思考

那其實這里實現(xiàn)的 switch 功能并不完整,如果說用戶匹配滿足多個條件呢?并且沒有 break,那么我們是不是應(yīng)該把匹配到的 template 都顯示出來呢?

自己嘗試一下實現(xiàn)看看?

到此這篇關(guān)于vue3中輕松實現(xiàn)switch功能組件的文章就介紹到這了,更多相關(guān)vue3實現(xiàn)switch功能組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue.set()和this.$set()使用和區(qū)別

    Vue.set()和this.$set()使用和區(qū)別

    我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,那么Vue.set()和this.$set()的區(qū)別是什么,本文詳細的介紹一下,感興趣的可以了解一下
    2021-06-06
  • 關(guān)于vue2強制刷新,解決頁面不會重新渲染的問題

    關(guān)于vue2強制刷新,解決頁面不會重新渲染的問題

    今天小編就為大家分享一篇關(guān)于vue2強制刷新,解決頁面不會重新渲染的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 一文詳析vue3?Props的用法(父傳子)

    一文詳析vue3?Props的用法(父傳子)

    這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父傳子)的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類型檢查和默認值設(shè)置,文中將用法介紹的非常詳細,需要的朋友可以參考下
    2024-10-10
  • 解決vue+element 鍵盤回車事件導(dǎo)致頁面刷新的問題

    解決vue+element 鍵盤回車事件導(dǎo)致頁面刷新的問題

    今天小編就為大家分享一篇解決vue+element 鍵盤回車事件導(dǎo)致頁面刷新的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • ant-design-vue動態(tài)表格合并案例

    ant-design-vue動態(tài)表格合并案例

    這篇文章主要介紹了ant-design-vue動態(tài)表格合并案例,文章圍繞主題通過案例詳解展開相關(guān)內(nèi)容,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • Vue組件之間傳值/調(diào)用幾種方式

    Vue組件之間傳值/調(diào)用幾種方式

    這篇文章主要介紹了Vue組件之間傳值/調(diào)用的幾種方式,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • vue?elementUi中的tabs標簽頁使用教程

    vue?elementUi中的tabs標簽頁使用教程

    Tabs 組件提供了選項卡功能,默認選中第一個標簽頁,下面這篇文章主要給大家介紹了關(guān)于vue?elementUi中的tabs標簽頁使用的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-03-03
  • vue多頁面配置詳情

    vue多頁面配置詳情

    這篇文章主要介紹了vue多頁面配置,單頁應(yīng)用這個概念,是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內(nèi)容里,我們在頁面渲染中講了頁面的局部刷新,而單頁應(yīng)用則是使用了頁面的局部刷新的能力,下面來看看詳細內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • Vue 實現(xiàn)前進刷新后退不刷新的效果

    Vue 實現(xiàn)前進刷新后退不刷新的效果

    這篇文章主要介紹了Vue 實現(xiàn)前進刷新后退不刷新的效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • vuex Module將 store 分割成模塊的操作

    vuex Module將 store 分割成模塊的操作

    這篇文章主要介紹了vuex Module將 store 分割成模塊,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-12-12

最新評論