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 Beschriftung des Formulars und das entsprechende Auswahl- und Eingabefeld

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Notizen

[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!