Vue3 Composition API怎麼優雅封裝第三方元件
前言
對於第三方元件，如何在保持第三方元件原始功能（屬性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 'vue'
const props = defineProps({
modelValue: {
type: String,
default: ''
},
clearable: {
type: Boolean,
default: false
}
})
const emits = defineEmits(['update:modelValue', 'clear'])
const inputVal = computed({
get: () => props.modelValue,
set: (val) => {
emits('update:modelValue', val)
}
})
const clear = () => {
emits('clear')
}
</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" 傳入內部元件
- ##$attrs:包含了父作用域中不作為元件 props 或自訂事件的attribute 綁定和事件（包括 class 和 style和自訂事件），同時可以透過v-bind="$attrs" 傳入內部元件。
- $listeners 物件在 Vue 3 中已移除。事件監聽器現在是 $attrs 的一部分。
- 在
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理？
Sep 05, 2023 am 08:41 AM
如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理？一、介紹在PHP專案中，我們經常需要爬取其他網站的數據，並對這些數據進行處理。而許多網站提供了API接口，我們可以透過呼叫這些接口來取得資料。本文將介紹如何使用PHP來呼叫API接口，實現資料的爬取與處理。二、取得API介面的URL和參數在開始之前，我們需要先取得目標API介面的URL以及所需的
如何處理Laravel API報錯問題
Mar 06, 2024 pm 05:18 PM
標題：如何處理LaravelAPI報錯問題，需要具體程式碼範例在進行Laravel開發時，常會遇到API報錯的情況。這些報錯可能來自於程式碼邏輯錯誤、資料庫查詢問題或是外部API請求失敗等多種原因。如何處理這些報錯是一個關鍵的問題，本文將透過具體的程式碼範例來示範如何有效處理LaravelAPI報錯問題。 1.錯誤處理在Laravel
Oracle API使用指南：探索資料介面技術
Mar 07, 2024 am 11:12 AM
Oracle是一家全球知名的資料庫管理系統供應商，其API（ApplicationProgrammingInterface，應用程式介面）是一種強大的工具，可協助開發人員輕鬆地與Oracle資料庫互動和整合。在本文中，我們將深入探討OracleAPI的使用指南，向讀者展示如何在開發過程中利用資料介面技術，同時提供具體的程式碼範例。 1.Oracle
Oracle API整合策略解析：實現系統間無縫通信
Mar 07, 2024 pm 10:09 PM
OracleAPI整合策略解析：實現系統間無縫通信，需要具體程式碼範例在當今數位化時代，企業內部系統之間需要相互通信和資料共享，而OracleAPI就是幫助實現系統間無縫通信的重要工具之一。本文將從OracleAPI的基本概念和原則入手，探討API整合的策略，最終給出具體的程式碼範例幫助讀者更好地理解和應用OracleAPI。一、OracleAPI基本
React API呼叫指南：如何與後端API互動和資料傳輸
Sep 26, 2023 am 10:19 AM
ReactAPI呼叫指南：如何與後端API進行互動和資料傳輸概述：在現代的Web開發中，與後端API進行互動和資料傳輸是一個常見的需求。 React作為一個流行的前端框架，提供了一些強大的工具和功能來簡化這個過程。本文將介紹如何使用React來呼叫後端API，包括基本的GET和POST請求，並提供具體的程式碼範例。安裝所需的依賴：首先，確保在專案中安裝了Axi
使用Python將API資料儲存為CSV格式
Aug 31, 2023 pm 09:09 PM
在資料驅動的應用程式和分析領域，API（應用程式介面）在從各種來源檢索資料方面發揮著至關重要的作用。使用API資料時，通常需要以易於存取和操作的格式儲存資料。其中一種格式是CSV（逗號分隔值），它允許有效地組織和儲存表格資料。本文將探討使用強大的程式語言Python將API資料儲存為CSV格式的過程。透過遵循本指南中概述的步驟，我們將學習如何從API中檢索資料、提取相關資訊並將其儲存在CSV檔案中以供進一步分析和處理。讓我們深入了解使用Python進行API資料處理的世界，並釋放CSV格式的潛
開發建議：如何利用ThinkPHP框架進行API開發
Nov 22, 2023 pm 05:18 PM
開發建議：如何利用ThinkPHP框架進行API開發隨著網際網路的不斷發展，API（ApplicationProgrammingInterface）的重要性也日益凸顯。 API是不同應用程式之間進行通訊的橋樑，它可以實現資料共享、功能呼叫等操作，為開發者提供了相對簡單且快速的開發方式。而ThinkPHP框架作為一款優秀的PHP開發框架，具有高效能、可擴展且易用
vue3的生命週期有哪些
Feb 01, 2024 pm 04:33 PM
vue3的生命週期：1、beforeCreate；2、created；3、beforeMount；4、mounted；5、beforeUpdate；6、updated；7、beforeDestroy；8、destroyed；9、activated；10、deactivated；11、errorCaptured；12 、getDerivedStateFromProps 等等
