Vue3 Composition API怎麼優雅封裝第三方元件-Vue.js-PHP中文網

前言

對於第三方元件，如何在保持第三方元件原始功能（屬性props、事件events、插槽slots、方法methods）的基礎上，優雅地進行功能的擴充了？

以Element Plus的el-input為例：

很有可能你以前是這樣玩的，封裝一個MyInput元件，把要使用的屬性props、事件events和插槽slots 、方法methods根據自己的需要再寫一遍：

// MyInput.vue
<template>
  <div class="my-input">
    <el-input v-model="inputVal" :clearable="clearable" @clear="clear">
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
      <template #suffix>
      <slot name="suffix"></slot>
    </template>
    </el-input>
  </div>
</template>
<script setup>
import { computed } from &#39;vue&#39;
const props = defineProps({
  modelValue: {
    type: String,
    default: &#39;&#39;
  },
  clearable: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits([&#39;update:modelValue&#39;, &#39;clear&#39;])
const inputVal = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits(&#39;update:modelValue&#39;, val)
  }
})
const clear = () => {
  emits(&#39;clear&#39;)
}
</script>

登入後複製

可過一段時間後，需求變更，又要在MyInput組件上添加el-input組件的其它功能，可el-input組件總共有20個多屬性，5個事件，4個插槽，那該怎麼辦呢，難道一個個傳進去，這樣不僅繁瑣而且可讀性差。

在Vue2中，我們可以這樣處理，點擊這裡查看封裝Vue第三方組件

此文詣在幫助大家做一個知識的遷移，探究如何使用Vue3 CompositionAPI優雅地封裝第三方元件~

一、對於第三方元件的屬性props、事件events

在Vue2中

$attrs: 包含了父作用域中不作為prop 被識別(且獲取) 的attribute 綁定(class 和style 除外)。當一個元件沒有宣告任何prop 時，這裡會包含所有父作用域的綁定(class 和style 除外)，並且可以透過v-bind="$attrs" 傳入內部元件
##$listeners:包含了父作用域中的(不含 .native 修飾器的) v-on 事件監聽器。它可以透過 v-on="$listeners" 傳入內部元件

#而在Vue3中

熱門教學

更多>

相關教學