Wie die Vue3 Composition API Komponenten von Drittanbietern elegant kapselt

Vorwort

Wie kann man bei Komponenten von Drittanbietern die Funktionen elegant erweitern und gleichzeitig die ursprünglichen Funktionen der Komponenten von Drittanbietern (Requisiten, Ereignisse, Slots, Methoden) beibehalten?

Nehmen Sie den El-Input von Element Plus als Beispiel:

Es ist sehr wahrscheinlich, dass Sie schon einmal so gespielt haben, indem Sie eine MyInput-Komponente gekapselt und die Requisiten, Ereignisse, Slots und Methoden hinzugefügt haben, die Sie entsprechend Ihren eigenen verwenden möchten Schreiben Sie es noch einmal:

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

Aber nach einiger Zeit ändern sich die Anforderungen und andere Funktionen der el-input-Komponente müssen zur MyInput-Komponente hinzugefügt werden. Eigenschaften, 5 Ereignisse und 4 Slots, was sollen wir tun? Das ist nicht nur umständlich, sondern hat auch eine schlechte Lesbarkeit.

In Vue2 können wir damit umgehen. Klicken Sie hier, um die Kapselung von Vue-Komponenten von Drittanbietern anzuzeigen.

Dieser Artikel soll Ihnen beim Wissenstransfer helfen und erkunden, wie Sie Vue3 CompositionAPI verwenden, um Komponenten von Drittanbietern elegant zu kapseln ~

1 . Für die Attribut-Requisiten und Ereignisse von Drittanbieter-Komponenten

in Vue2

• $attrs: Enthält Attributbindungen (außer Klasse und Stil), die im übergeordneten Bereich nicht als Requisiten erkannt (und abgerufen) werden. Wenn eine Komponente keine Requisiten deklariert, werden alle übergeordneten Bereichsbindungen (außer Klasse und Stil) hier einbezogen, und interne Komponenten können über v-bind="$attrs"

• $listeners: Included v- übergeben werden. auf dem Ereignis-Listener im übergeordneten Bereich (ohne .native-Modifikator). Es kann über v-on="$listeners"

und in Vue3

• an interne Komponenten übergeben werden. $attrs: enthält Attributbindungen und Ereignisse im übergeordneten Bereich, die keine Komponenten-Requisiten oder benutzerdefinierten Ereignisse sind (einschließlich Klasse). , Stil und benutzerdefinierte Ereignisse) und interne Komponenten können über v-bind="$attrs" übergeben werden.

• $listeners-Objekt wurde in Vue 3 entfernt. Ereignis-Listener sind jetzt Teil von $attrs.

• Im kann die Hilfsfunktion useAttrs $attrs abrufen.

//MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs"></el-input>
  </div>
</template>
<script setup>
import { useAttrs } from &#39;vue&#39;
const attrs = useAttrs()
</script>

Natürlich ist das nicht genug. Wenn Sie einfach so schreiben, funktionieren die von uns gebundenen Attribute (einschließlich Klasse und Stil) auch für das Stammelement (das obige Beispiel ist der Dom-Knoten mit class="my-input"). Um dieses Standardverhalten zu verhindern, müssen wir inheritAttrs auf false setzen.

Werfen wir einen Blick auf die Erklärung des Vue3-Dokuments zu inheritAttrs

Standardmäßig werden Attributbindungen im übergeordneten Bereich, die nicht als Requisiten erkannt werden, „zurückgegriffen“ und als normale HTML-Attribute auf das Stammelement von auf das untergeordnete Element angewendet die Komponente. Beim Schreiben einer Komponente, die ein Zielelement oder eine andere Komponente umschließt, entspricht dies möglicherweise nicht immer dem erwarteten Verhalten. Durch Festlegen von inheritAttrs auf „false“ werden diese Standardverhalten entfernt. Diese Attribute können durch die Instanzeigenschaft $attrs wirksam gemacht und über v-bind explizit an Nicht-Root-Elemente gebunden werden.

Wir können also den folgenden Code schreiben, um die Requisiten und Ereignisse von Komponenten von Drittanbietern zu verarbeiten:

// MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs"></el-input>
  </div>
</template>
<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs } from &#39;vue&#39;
const attrs = useAttrs()
</script>

2. Für die Slots von Komponenten von Drittanbietern

In Vue3

• $slots: Wir können ihn verwenden Holen Sie sich den von der übergeordneten Komponente übergebenen Slot

• $scopedSlots wurde in Vue3 entfernt und alle Slots werden als Funktionen über $slots verfügbar gemacht

• Die Hilfsfunktion useSlots in

  

  Heiße KI -Werkzeuge

  

  Undresser.AI Undress

  KI-gestützte App zum Erstellen realistischer Aktfotos

  

  AI Clothes Remover

  Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

  

  Undress AI Tool

  Ausziehbilder kostenlos

  

  Clothoff.io

  KI-Kleiderentferner

  

  AI Hentai Generator

  Erstellen Sie kostenlos Ai Hentai.

  Mehr anzeigen

  

  Heißer Artikel

  R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

  3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

  R.E.P.O. Beste grafische Einstellungen

  3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

  Assassin's Creed Shadows: Seashell Riddle -Lösung

  2 Wochen vor By DDD

  R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

  3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

  WWE 2K25: Wie man alles in Myrise freischaltet

  3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

  Mehr anzeigen

  

  Heiße Werkzeuge

  

  Notepad++7.3.1

  Einfach zu bedienender und kostenloser Code-Editor

  

  SublimeText3 chinesische Version

  Chinesische Version, sehr einfach zu bedienen

  

  Senden Sie Studio 13.0.1

  Leistungsstarke integrierte PHP-Entwicklungsumgebung

  

  Dreamweaver CS6

  Visuelle Webentwicklungstools

  

  SublimeText3 Mac-Version

  Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

  Mehr anzeigen

  

  Heiße Themen

  Wo ist der Login-Zugang für Gmail-E-Mail?

  7467

  15

  CakePHP-Tutorial

  1376

  52

  Wie lautet das Format des Kontonamens von Steam?

  77

  11

  Win11 -Aktivierungsschlüssel dauerhaft

  45

  19

  NYT -Verbindungen Hinweise und Antworten

  18

  19

  Mehr anzeigen

Related knowledge

Wie kann ich Daten durch Aufrufen der API-Schnittstelle in einem PHP-Projekt crawlen und verarbeiten? Sep 05, 2023 am 08:41 AM

Wie kann ich Daten durch Aufrufen der API-Schnittstelle in einem PHP-Projekt crawlen und verarbeiten? 1. Einführung In PHP-Projekten müssen wir häufig Daten von anderen Websites crawlen und diese Daten verarbeiten. Viele Websites bieten API-Schnittstellen, und wir können Daten durch Aufrufen dieser Schnittstellen abrufen. In diesem Artikel wird erläutert, wie Sie mit PHP die API-Schnittstelle zum Crawlen und Verarbeiten von Daten aufrufen. 2. Ermitteln Sie die URL und die Parameter der API-Schnittstelle. Bevor Sie beginnen, müssen Sie die URL der Ziel-API-Schnittstelle und die erforderlichen Parameter ermitteln.

React API Call Guide: So interagieren und übertragen Sie Daten mit der Backend-API Sep 26, 2023 am 10:19 AM

ReactAPI-Aufrufanleitung: So interagieren Sie mit der Backend-API und übertragen Daten an diese. Übersicht: In der modernen Webentwicklung ist die Interaktion mit und die Übertragung von Daten an die Backend-API eine häufige Anforderung. React bietet als beliebtes Front-End-Framework einige leistungsstarke Tools und Funktionen, um diesen Prozess zu vereinfachen. In diesem Artikel wird erläutert, wie Sie mit React die Backend-API aufrufen, einschließlich grundlegender GET- und POST-Anfragen, und es werden spezifische Codebeispiele bereitgestellt. Installieren Sie die erforderlichen Abhängigkeiten: Stellen Sie zunächst sicher, dass Axi im Projekt installiert ist

Oracle API-Nutzungshandbuch: Erkundung der Datenschnittstellentechnologie Mar 07, 2024 am 11:12 AM

Oracle ist ein weltbekannter Anbieter von Datenbankmanagementsystemen und seine API (Application Programming Interface) ist ein leistungsstarkes Tool, das Entwicklern hilft, einfach mit Oracle-Datenbanken zu interagieren und diese zu integrieren. In diesem Artikel befassen wir uns mit dem Oracle API-Nutzungsleitfaden, zeigen den Lesern, wie sie die Datenschnittstellentechnologie während des Entwicklungsprozesses nutzen können, und stellen spezifische Codebeispiele bereit. 1.Orakel

Analyse der Oracle API-Integrationsstrategie: Erreichen einer nahtlosen Kommunikation zwischen Systemen Mar 07, 2024 pm 10:09 PM

Analyse der Oracle API-Integrationsstrategie: Um eine nahtlose Kommunikation zwischen Systemen zu erreichen, sind spezifische Codebeispiele erforderlich. Im heutigen digitalen Zeitalter müssen interne Unternehmenssysteme miteinander kommunizieren und Daten austauschen, und Oracle API ist eines der wichtigen Tools, um eine nahtlose Kommunikation zu erreichen Kommunikation zwischen Systemen. Dieser Artikel beginnt mit den grundlegenden Konzepten und Prinzipien von OracleAPI, untersucht API-Integrationsstrategien und gibt schließlich spezifische Codebeispiele, um den Lesern zu helfen, OracleAPI besser zu verstehen und anzuwenden. 1. Grundlegende Oracle-API

Speichern Sie API-Daten mit Python im CSV-Format Aug 31, 2023 pm 09:09 PM

In der Welt der datengesteuerten Anwendungen und Analysen spielen APIs (Application Programming Interfaces) eine entscheidende Rolle beim Abrufen von Daten aus verschiedenen Quellen. Wenn Sie mit API-Daten arbeiten, müssen Sie die Daten häufig in einem Format speichern, das leicht zugänglich und einfach zu bearbeiten ist. Ein solches Format ist CSV (Comma Separated Values), mit dem tabellarische Daten effizient organisiert und gespeichert werden können. In diesem Artikel wird der Prozess des Speicherns von API-Daten im CSV-Format mithilfe der leistungsstarken Programmiersprache Python erläutert. Indem wir die in diesem Leitfaden beschriebenen Schritte befolgen, erfahren wir, wie wir Daten aus der API abrufen, relevante Informationen extrahieren und sie zur weiteren Analyse und Verarbeitung in einer CSV-Datei speichern. Tauchen wir ein in die Welt der API-Datenverarbeitung mit Python und erschließen wir das Potenzial des CSV-Formats

So gehen Sie mit Laravel-API-Fehlerproblemen um Mar 06, 2024 pm 05:18 PM

Titel: Wie man mit Laravel-API-Fehlerproblemen umgeht, sind spezifische Codebeispiele erforderlich. Bei der Entwicklung von Laravel treten häufig API-Fehler auf. Diese Fehler können verschiedene Ursachen haben, z. B. Logikfehler im Programmcode, Probleme bei Datenbankabfragen oder Fehler bei externen API-Anfragen. Der Umgang mit diesen Fehlerberichten ist ein zentrales Thema. In diesem Artikel wird anhand spezifischer Codebeispiele gezeigt, wie Laravel-API-Fehlerberichte effektiv verarbeitet werden. 1. Fehlerbehandlung in Laravel

So entwickeln Sie eine einfache CRUD-API mit MongoDB Sep 19, 2023 pm 12:32 PM

So verwenden Sie MongoDB zum Entwickeln einer einfachen CRUDAPI. In der modernen Webanwendungsentwicklung sind CRUD-Operationen (Hinzufügen, Löschen, Ändern, Abfragen) eine der häufigsten und wichtigsten Funktionen. In diesem Artikel stellen wir die Entwicklung einer einfachen CRUD-API mithilfe der MongoDB-Datenbank vor und stellen spezifische Codebeispiele bereit. MongoDB ist eine Open-Source-NoSQL-Datenbank, die Daten in Form von Dokumenten speichert. Im Gegensatz zu herkömmlichen relationalen Datenbanken verfügt MongoDB nicht über ein vordefiniertes Schema

Was sind die Lebenszyklen von vue3? Feb 01, 2024 pm 04:33 PM

vue3-Funktionen: 1、beforeCreate；2、created；3、beforeMount；4、mounted；5、beforeUpdate；6、updated；7、beforeDestroy；8、destroyed；9、activated；10、deactivated；11、error Captured；12 、getDerivedStateFromProps-Funktion

See all articles