Comment l'API de composition Vue3 encapsule élégamment les composants tiers

Avant-propos

Pour les composants tiers, comment étendre élégamment les fonctions tout en conservant les fonctions d'origine des composants tiers (accessoires, événements, slots, méthodes) ?

Prenons l'exemple de l'el-input d'Element Plus :

Il est très probable que vous ayez déjà joué comme ça, en encapsulant un composant MyInput et en ajoutant les accessoires, les événements, les emplacements et les méthodes à utiliser selon les vôtres besoins. Écrivez-le à nouveau :

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

Mais après un certain temps, les exigences changent et d'autres fonctions du composant el-input doivent être ajoutées au composant MyInput. Le composant el-input a un total de 20 multi-. propriétés, 5 événements et 4 emplacements, que devons-nous faire ? Devons-nous les transmettre un par un, ce qui est non seulement fastidieux, mais également peu lisible.

Dans Vue2, nous pouvons le gérer comme ceci, cliquez ici pour voir l'encapsulation des composants tiers de Vue

Cet article est pour vous aider à transférer des connaissances et à explorer comment utiliser Vue3 CompositionAPI pour encapsuler élégamment des composants tiers~

1 . Pour les accessoires d'attribut et les événements des composants tiers

dans Vue2

• $attrs : inclut les liaisons d'attributs (à l'exception de la classe et du style) qui ne sont pas reconnues (et obtenues) comme accessoires dans la portée parent. Lorsqu'un composant ne déclare aucun accessoire, toutes les liaisons de portée parent (sauf la classe et le style) seront incluses ici, et les composants internes peuvent être transmis via v-bind="$attrs"

• $listeners : inclus v- sur l'écouteur d'événement dans la portée parent (sans modificateur .native). Il peut être transmis aux composants internes via v-on="$listeners"

et dans Vue3

• $attrs : contient des liaisons d'attributs et des événements dans la portée parent qui ne sont pas des accessoires de composant ou des événements personnalisés (y compris la classe , style et événements personnalisés), et les composants internes peuvent être transmis via v-bind="$attrs".

• L'objet $listeners a été supprimé dans Vue 3. Les écouteurs d'événements font désormais partie de $attrs.

• Dans

  

  Outils d'IA chauds

  

  Undresser.AI Undress

  Application basée sur l'IA pour créer des photos de nu réalistes

  

  AI Clothes Remover

  Outil d'IA en ligne pour supprimer les vêtements des photos.

  

  Undress AI Tool

  Images de déshabillage gratuites

  

  Clothoff.io

  Dissolvant de vêtements AI

  

  AI Hentai Generator

  Générez AI Hentai gratuitement.

  Afficher plus

  

  Article chaud

  R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

  3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

  R.E.P.O. Meilleurs paramètres graphiques

  3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

  Assassin's Creed Shadows: Solution d'énigmes de coquille

  2 Il y a quelques semaines By DDD

  R.E.P.O. Comment réparer l'audio si vous n'entendez personne

  3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

  WWE 2K25: Comment déverrouiller tout dans Myrise

  3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

  Afficher plus

  

  Outils chauds

  

  Bloc-notes++7.3.1

  Éditeur de code facile à utiliser et gratuit

  

  SublimeText3 version chinoise

  Version chinoise, très simple à utiliser

  

  Envoyer Studio 13.0.1

  Puissant environnement de développement intégré PHP

  

  Dreamweaver CS6

  Outils de développement Web visuel

  

  SublimeText3 version Mac

  Logiciel d'édition de code au niveau de Dieu (SublimeText3)

  Afficher plus

  

  Sujets chauds

  Où se trouve l'entrée de connexion pour la messagerie Gmail ?

  7465

  15

  Tutoriel CakePHP

  1376

  52

  Quel est le format du nom de compte de Steam

  77

  11

  Clé d'activation Win11 permanent

  45

  19

  NYT Connexions Indices et réponses

  18

  19

  Afficher plus

Related knowledge

Comment explorer et traiter les données en appelant l'interface API dans un projet PHP ? Sep 05, 2023 am 08:41 AM

Comment explorer et traiter les données en appelant l'interface API dans un projet PHP ? 1. Introduction Dans les projets PHP, nous devons souvent explorer les données d'autres sites Web et traiter ces données. De nombreux sites Web fournissent des interfaces API et nous pouvons obtenir des données en appelant ces interfaces. Cet article explique comment utiliser PHP pour appeler l'interface API afin d'explorer et de traiter les données. 2. Obtenez l'URL et les paramètres de l'interface API Avant de commencer, nous devons obtenir l'URL de l'interface API cible et les paramètres requis.

Guide d'appel de l'API React : Comment interagir et transférer des données avec l'API backend Sep 26, 2023 am 10:19 AM

Guide d'appel ReactAPI : Comment interagir avec et transférer des données vers l'API backend Présentation : Dans le développement Web moderne, interagir avec et transférer des données vers l'API backend est une exigence courante. React, en tant que framework frontal populaire, fournit des outils et fonctionnalités puissants pour simplifier ce processus. Cet article explique comment utiliser React pour appeler l'API backend, y compris les requêtes de base GET et POST, et fournit des exemples de code spécifiques. Installez les dépendances requises : Tout d'abord, assurez-vous qu'Axi est installé dans le projet

Guide d'utilisation de l'API Oracle : exploration de la technologie d'interface de données Mar 07, 2024 am 11:12 AM

Oracle est un fournisseur de systèmes de gestion de bases de données de renommée mondiale et son API (Application Programming Interface) est un outil puissant qui aide les développeurs à interagir et à s'intégrer facilement aux bases de données Oracle. Dans cet article, nous approfondirons le guide d'utilisation de l'API Oracle, montrerons aux lecteurs comment utiliser la technologie d'interface de données pendant le processus de développement et fournirons des exemples de code spécifiques. 1.Oracle

Analyse de la stratégie d'intégration des API Oracle : parvenir à une communication transparente entre les systèmes Mar 07, 2024 pm 10:09 PM

Analyse de la stratégie d'intégration de l'API Oracle : pour parvenir à une communication transparente entre les systèmes, des exemples de code spécifiques sont nécessaires. À l'ère numérique d'aujourd'hui, les systèmes internes de l'entreprise doivent communiquer entre eux et partager des données, et l'API Oracle est l'un des outils importants pour contribuer à une communication transparente. communication entre les systèmes. Cet article commencera par les concepts et principes de base d'OracleAPI, explorera les stratégies d'intégration d'API et enfin donnera des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer OracleAPI. 1. API Oracle de base

Enregistrez les données de l'API au format CSV à l'aide de Python Aug 31, 2023 pm 09:09 PM

Dans le monde des applications et de l'analyse basées sur les données, les API (Application Programming Interfaces) jouent un rôle essentiel dans la récupération de données provenant de diverses sources. Lorsque vous travaillez avec des données API, vous devez souvent stocker les données dans un format facile d'accès et de manipulation. L'un de ces formats est le CSV (Comma Separated Values), qui permet d'organiser et de stocker efficacement les données tabulaires. Cet article explorera le processus de sauvegarde des données API au format CSV à l'aide du puissant langage de programmation Python. En suivant les étapes décrites dans ce guide, nous apprendrons comment récupérer des données de l'API, extraire des informations pertinentes et les stocker dans un fichier CSV pour une analyse et un traitement plus approfondis. Plongeons dans le monde du traitement de données API avec Python et libérons le potentiel du format CSV

Comment gérer les problèmes d'erreur de l'API Laravel Mar 06, 2024 pm 05:18 PM

Titre : Comment gérer les problèmes d'erreur de l'API Laravel, des exemples de code spécifiques sont nécessaires lors du développement de Laravel, des erreurs d'API sont souvent rencontrées. Ces erreurs peuvent provenir de diverses raisons telles que des erreurs logiques du code du programme, des problèmes de requête de base de données ou des échecs de requête d'API externe. La façon de gérer ces rapports d'erreurs est un problème clé. Cet article utilisera des exemples de code spécifiques pour démontrer comment gérer efficacement les rapports d'erreurs de l'API Laravel. 1. Gestion des erreurs dans Laravel

Comment développer une API CRUD simple à l'aide de MongoDB Sep 19, 2023 pm 12:32 PM

Comment utiliser MongoDB pour développer une API CRUD simple Dans le développement d'applications Web modernes, les opérations CRUD (Créer, Supprimer, Modifier, Vérifier) ​​sont l'une des fonctions les plus courantes et les plus importantes. Dans cet article, nous présenterons comment développer une API CRUD simple à l'aide de la base de données MongoDB et fournirons des exemples de code spécifiques. MongoDB est une base de données NoSQL open source qui stocke les données sous forme de documents. Contrairement aux bases de données relationnelles traditionnelles, MongoDB n'a pas de schéma prédéfini

Quels sont les cycles de vie de vue3 Feb 01, 2024 pm 04:33 PM

vue3的生命周期: 1, avantCréation ; 、getDerivedStateFromProps等等

See all articles