Comment l'API de composition Vue3 encapsule élégamment les composants tiers-Voir.js-php.cn

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

WBOY

Libérer： 2023-05-11 19:13:09

avant

1596 Les gens l'ont consulté

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>

Copier après la connexion

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