Detailliertes Beispiel für die sekundäre Kapselung von Komponenten basierend auf Element-Plus durch Vue

Dieser Artikel vermittelt Ihnen relevantes Wissen über vue und stellt hauptsächlich den relevanten Inhalt zur bidirektionalen Bindung von Vue3-Komponenten-Sekundärkapselungsdaten basierend auf Element-Plus vor. In der tatsächlichen Entwicklung ist die Verwendung von Element-Plus-Plus häufig erforderlich kapselt einige seiner eigenen maßgeschneiderten Komponenten, um den schnellen Aufbau unseres aktuellen Geschäfts zu erleichtern. Ich hoffe, es wird für alle hilfreich sein. 🔜 unserer eigenen kundenspezifischen Komponenten, um unser aktuelles Geschäft schnell aufzubauen. In vue2.0 erfolgt die bidirektionale Bindung von Eltern-Kind-Komponentendaten normalerweise durch Übergabe des Werts in props: value.sync und Verwendung in der untergeordneten Komponente this.$emit("update:value", value ), dann Wie implementieren wir eine ähnliche bidirektionale Bindung von Eltern-Kind-Komponenten in vue3?

In vue2 ist die Reaktionsfähigkeit von Daten eine bidirektionale Datenbindung basierend auf dem Object.defineProperty-Objekt. Dieses Hijacking- + Veröffentlichungs- und Abonnementmodell kann komplexe Datentypen wie Objekte und Arrays nicht sehr gut erkennen. Die Reaktionsfähigkeit von vue3-Daten basiert auf den Set- und Get-Methoden des Proxys. Im Vergleich zur Entführung von Object.defineProperty ist die Proxy-Methode eleganter.

Die spezifischen Implementierungsideen lauten wie folgt:

Die Beschriftung des Formulars und das entsprechende Auswahl- und Eingabefeld

Effektvorschau

EL-Input-Unterkomponentenkapselung baseInput.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-input></el-input>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  }
})
const emits = defineEmits([&#39;update:value&#39;])
// 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
</script>

el - Wählen Sie die Kapselungsbasis für untergeordnete Komponenten aus Ich muss mir keine Sorgen mehr machen, ich bin beunruhigt darüber, dass untergeordnete Komponenten die Requisiten der übergeordneten Komponente nicht ändern können. Die allgemeine Implementierungsidee anderer Elementkomponenten ist dieselbe. Einfaches Dialog-Popup-Feld

El-Dialog-Unterkomponentenkapselung baseDialog.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-select>
      <el-option></el-option>
    </el-select>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  },
  placeholder: {
    type: String,
    default: &#39;请选择&#39;
  },
  options: {
    type: Array,
    default() {
      return [{ value: &#39;&#39;, label: &#39;&#39; }]
    }
  },
  // 一下三个属性配合多选使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
})
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
const emits = defineEmits([&#39;update:value&#39;])
</script>

Aufruf anderer Komponenten

<baseinput></baseinput>
<baseselect></baseselect>

Notizen

V-Modell-Zwei-Wege-Bindung Der Standard-Requisitenname lautet value, die Bindung wie im Dialog ist isShow. Sie müssen den Parameternamen v-model:isShow für die bidirektionale Bindung props nach v-model deklarieren. Die Bindung von Eingabefeldern wie input und select ist standardmäßig auf value festgelegt, sodass Sie sie ignorieren können schreibe es. Wenn Sie andere Werte binden (d. h. andere Parameterwerte als value), benötigen Sie eine v-model:isShow-Deklaration

[Verwandte Empfehlungen: Javascript-Video-Tutorial

,

vue.js-Tutorial]

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die sekundäre Kapselung von Komponenten basierend auf Element-Plus durch Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!