How Vue3 Composition API elegantly encapsulates third-party components
Preface
For third-party components, how to elegantly extend the functions while maintaining the original functions of the third-party components (properties, events, slots, methods)?
Take Element Plus’ el-input as an example:
Most likely you have played like this before, encapsulating a MyInput component and putting the props, events and slots to be used . Write the methods again according to your own needs:
// 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>But after a period of time, the requirements change, and other functions of the el-input component need to be added to the MyInput component. The el-input component has a total of 20 There are multiple attributes, 5 events, and 4 slots. What should we do? Should we pass them in one by one? This is not only cumbersome but also has poor readability.
In Vue2, we can handle it like this, click here to view the encapsulation of Vue third-party components
This article is to help you migrate knowledge and explore how to use Vue3 CompositionAPI to encapsulate elegantly Third-party components~
1. For the property props and events of third-party components
In Vue2
$attrs: includes the parent role Attribute bindings (except class and style) in the domain that are not recognized (and obtained) as props. When a component does not declare any props, all parent scope bindings (except class and style) will be included here, and internal components can be passed in via v-bind="$attrs"
-
$listeners: Contains v-on event listeners in the parent scope (excluding .native modifiers). It can pass v-on="$listeners" to pass in internal components
and in Vue3
$attrs: contains the parent role Attribute bindings and events (including class, style and custom events) that are not used as component props or custom events in the domain can also be passed into internal components through v-bind="$attrs".
$listeners object has been removed in Vue 3. Event listeners are now part of $attrs.
The auxiliary function useAttrs in
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
What's New in Windows 11 KB5054979 & How to Fix Update Issues3 weeks ago By DDDHow to fix KB5055523 fails to install in Windows 11?2 weeks ago By DDDInZoi: How To Apply To School And University4 weeks ago By DDDHow to fix KB5055518 fails to install in Windows 10?2 weeks ago By DDDWhere to find the Site Office Key in Atomfall4 weeks ago By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to crawl and process data by calling API interface in PHP project?
Sep 05, 2023 am 08:41 AM
How to crawl and process data by calling API interface in PHP project? 1. Introduction In PHP projects, we often need to crawl data from other websites and process these data. Many websites provide API interfaces, and we can obtain data by calling these interfaces. This article will introduce how to use PHP to call the API interface to crawl and process data. 2. Obtain the URL and parameters of the API interface. Before starting, we need to obtain the URL of the target API interface and the required parameters.
Oracle API Usage Guide: Exploring Data Interface Technology
Mar 07, 2024 am 11:12 AM
Oracle is a world-renowned database management system provider, and its API (Application Programming Interface) is a powerful tool that helps developers easily interact and integrate with Oracle databases. In this article, we will delve into the Oracle API usage guide, show readers how to utilize data interface technology during the development process, and provide specific code examples. 1.Oracle
How to deal with Laravel API error problems
Mar 06, 2024 pm 05:18 PM
Title: How to deal with Laravel API error problems, specific code examples are needed. When developing Laravel, API errors are often encountered. These errors may come from various reasons such as program code logic errors, database query problems, or external API request failures. How to handle these error reports is a key issue. This article will use specific code examples to demonstrate how to effectively handle Laravel API error reports. 1. Error handling in Laravel
Oracle API integration strategy analysis: achieving seamless communication between systems
Mar 07, 2024 pm 10:09 PM
OracleAPI integration strategy analysis: To achieve seamless communication between systems, specific code examples are required. In today's digital era, internal enterprise systems need to communicate with each other and share data, and OracleAPI is one of the important tools to help achieve seamless communication between systems. This article will start with the basic concepts and principles of OracleAPI, explore API integration strategies, and finally give specific code examples to help readers better understand and apply OracleAPI. 1. Basic Oracle API
React API Call Guide: How to interact and transfer data with the backend API
Sep 26, 2023 am 10:19 AM
ReactAPI Call Guide: How to interact with and transfer data to the backend API Overview: In modern web development, interacting with and transferring data to the backend API is a common need. React, as a popular front-end framework, provides some powerful tools and features to simplify this process. This article will introduce how to use React to call the backend API, including basic GET and POST requests, and provide specific code examples. Install the required dependencies: First, make sure Axi is installed in the project
Development suggestions: How to use the ThinkPHP framework for API development
Nov 22, 2023 pm 05:18 PM
Development suggestions: How to use the ThinkPHP framework for API development. With the continuous development of the Internet, the importance of API (Application Programming Interface) has become increasingly prominent. API is a bridge for communication between different applications. It can realize data sharing, function calling and other operations, and provides developers with a relatively simple and fast development method. As an excellent PHP development framework, the ThinkPHP framework is efficient, scalable and easy to use.
Save API data to CSV format using Python
Aug 31, 2023 pm 09:09 PM
In the world of data-driven applications and analytics, APIs (Application Programming Interfaces) play a vital role in retrieving data from various sources. When working with API data, you often need to store the data in a format that is easy to access and manipulate. One such format is CSV (Comma Separated Values), which allows tabular data to be organized and stored efficiently. This article will explore the process of saving API data to CSV format using the powerful programming language Python. By following the steps outlined in this guide, we will learn how to retrieve data from the API, extract relevant information, and store it in a CSV file for further analysis and processing. Let’s dive into the world of API data processing with Python and unlock the potential of the CSV format
What are the life cycles of 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等等
