Wie die Vue3 Composition API Komponenten von Drittanbietern elegant kapselt-View.js-php.cn

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren