亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue組件二次封裝的實用技巧是什么

發布時間:2022-04-29 14:04:18 來源:億速云 閱讀:411 作者:zzz 欄目:開發技術

這篇文章主要講解了“Vue組件二次封裝的實用技巧是什么”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“Vue組件二次封裝的實用技巧是什么”吧!

    透傳 Attribute

    我們可以使用一個沒有參數的 v-bind來實現props,events的透傳, 它會將一個對象的所有屬性都作為 attribute 應用到目標元素或組件上, 這在官方文檔中有著詳細介紹。

    <BaseButton v-bind="$attrs"/>

    其中$attrs包含組件可以透傳屬性的對象, 透傳屬性包括props,events, class,style,id等。(不包含接收組件顯式聲明的 props、emits以及slots )

    如下,是一個封裝el-input的默認可清空的的組件,由于我們已經在defineProps聲明過clearable, 所以此時我們需要顯性傳遞clearable屬性

    <template>
      <div class="my-input">
        {{ label }}
        <el-input v-bind="$attrs" :clearable="clearable"></el-input>
      </div>
    </template>
    
    <script setup>
    defineProps({
      label: String,
      clearable: {
        type: Boolean,
        default: true,
      },
    });
    </script>

    如果我們不希望透傳某些屬性比如class, 我們可以通過useAttrs來實現

    <template>
      <div class="my-input">
        {{ label }}
        <el-input v-bind="filteredAttrs" :clearable="clearable"></el-input>
      </div>
    </template>
    
    <script setup>
    import { computed, useAttrs } from 'Vue';
    
    defineProps({
      label: String,
      clearable: {
        type: Boolean,
        default: true,
      },
    });
    
    const attrs = useAttrs();
    const filteredAttrs = computed(() => {
      return { ...attrs, class: undefined };
    });
    </script>

    上述封裝的組件還有個缺點, 就是我們將無法使用el-input本身提供的slot,下面我們就來實現一個可以透傳 slot的組件

    透傳 slot

    slot可以通過下面這種方式透傳的

    <!-- 在組件中創建新的對應名稱的插槽 -->
    <template #slotName>
    <!-- 在插槽內部使用對應名稱的插槽 -->
        <slot name="slotName" />
    </template>

    普通slot

    如果透傳的slot比較少,我們可以通過在封裝組件內部定義并使用插槽<template v-slot:slotName><slot name="slotName" /></template>來透傳插槽

    <template #slotName>
        <slot name="slotName" />
    </template>

    動態插槽名

    如果需要透傳的slot不固定或者較多,我們可以通過動態插槽名稱透傳

    <template #[slotName] v-for="(slot, slotName) in $slots" >
        <slot :name="slotName" />
    </template>

    如下是一個透傳的slot的el-input組件

    <template>
      <div class="my-input">
        {{ label }}
        <el-input v-bind="$attrs" :clearable="clearable">
          <template #[slotName] v-for="(slot, slotName) in $slots">
              <slot :name="slotName" />
          </template>
        </el-input>
      </div>
    </template>
    
    <script setup>
    defineProps({
      label: String,
      clearable: {
        type: Boolean,
        default: true,
      },
    });
    </script>

    作用域插槽

    如果需要封裝組件使用了作用域插槽,我們可以通過<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>來透傳作用域插槽插槽。

    <template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
        <slot :name="slotName" v-bind="slotProps"/>
    </template>

    封裝組件存在的問題

    組件實例屬性和方法的調用

    封裝后的組件我們無法按照之前的情況調用組件實例中的屬性和方法,比如BaseButton有focus方法,在封裝之前我們可以通過下面這種方式調用

    // 調用BaseButton的組件父組件
    // <BaseButton ref="button">
    const button = ref();
    button.value.focus()

    對于封裝后的組件,由于此時button指向我們的MyButton,并不指向BaseButton的實例,所以我們需要在包裝的組件中聲明并暴露BaseButton事例

    //我們封裝的組件
    // MyButton.Vue
    // <BaseButton ref="button">
    const button = ref();

    注意如果我們使用 <script setup>,是沒辦法訪問實例中的屬性的,詳情參考vuejs.org/api/sfc-scr&hellip;

    此時可以通過defineExpose顯式公開ref屬性

    // 我們封裝的組件
    // MyButton.Vue
    // <BaseButton ref="button">
    const button = ref();
    defineExpose({
      button
    });

    然后在父組件中我就可以通過實例鏈式調用封裝的組件了

    // <MyButton ref="button">
    const button = ref();
    button.value.button.focus()

    感謝各位的閱讀,以上就是“Vue組件二次封裝的實用技巧是什么”的內容了,經過本文的學習后,相信大家對Vue組件二次封裝的實用技巧是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    vue
    AI

    蒲江县| 峨山| 克东县| 肇州县| 海丰县| 河北区| 扶余县| 西林县| 东安县| 卢氏县| 大港区| 法库县| 德格县| 鹤壁市| 子洲县| 来宾市| 桃园县| 哈尔滨市| 新宾| 九江县| 水城县| 洪洞县| 长海县| 崇明县| 仪陇县| 静宁县| 隆化县| 黎城县| 陈巴尔虎旗| 和平县| 库车县| 册亨县| 凉山| 南投市| 开阳县| 深水埗区| 鄂托克前旗| 常熟市| 永城市| 绍兴市| 定西市|