Eine kurze Diskussion über die Anwendungsszenarien der integrierten Komponentenkomponenten von Vue

In diesem Artikel werden hauptsächlich die Anwendungsszenarien der integrierten Komponentenkomponenten von Vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Offizielle Anweisungen

Rendern Sie eine „Metakomponente“ als dynamische Komponente. Welche Komponente gerendert wird, hängt vom Wert von is ab.

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

Weitere Informationen zur

dynamischen Komponente

finden Sie in der offiziellen Website-Dokumentation. Die integrierte Komponentenkomponente

Szene

Hier ist ein Geschäftsszenario zur Veranschaulichung der Anwendung der integrierten Komponentenkomponenten von Vue. Wie in der Abbildung dargestellt, ist die klassische Registrierungsseite in E-Mail-Registrierung und Mobiltelefon-Registrierung unterteilt. Oben im Popup-Fenster befindet sich eine Schaltfläche zum Wechseln der Registrierungsart Formularinformationen. Die E-Mail-Registrierung und die Mobiltelefonregistrierung haben unterschiedliche Formularinhalte. Unten finden Sie die Schaltfläche „Registrieren“ und andere Aktionen. Nach der Analyse sind die Mobiltelefon-Registrierungsschnittstelle und die E-Mail-Registrierungsschnittstelle bis auf den inkonsistenten Inhalt des Formulars in der Mitte identisch.

Im tatsächlichen Projektcode-Design gibt es einige praktikable Lösungen, um Wiederverwendbarkeit und Wartbarkeit sicherzustellen. Hier verwenden wir die integrierte Komponentenkomponente von vue, um dies zu erreichen.

Kerncode-Implementierung

Wenn die obere Registerkarte umgeschaltet wird, ändert sich der Typwert und die entsprechenden Formularkomponenten ändern sich auch

<template>
 <p>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleCloseBtnClick"></a>
	<p>
	 <h3>新用户注册</h3>
	 <p>
		<span :class="{active: type === &#39;mobileForm&#39;}" @click="type = mobileForm">手机注册</span>
		<span :class="{active: type === &#39;emailForm&#39;}" @click="type = emailForm">邮箱注册</span>
	 </p>
	</p>
	<component :is="type" ref="form">
	 <button @click="handleRegisterBtnClick">注册</button>
	 <p ><span ><span>注册视为同意</span><a> 《法律条款和隐私说明》</a></span></p>
	 <p><span>已有账号<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleLoginBtnClick">直接登入>></a></span></p>
	</component>
 </p>
</template>
<script>
 export default {
 	methods: {
		handleRegisterBtnClick () {
		 	this.$refs.form.validateData().then(() => {
				this.$refs.form.getFormData()
			})
		 }
	}
 }
</script>

Mixins-Mischung

Bei Verwendung der integrierten Komponentenkomponenten von Vue weisen die tatsächlich gerenderten Komponenten im Allgemeinen bestimmte Gemeinsamkeiten auf, z. B. dieselben Attribute, dieselben Methode oder der gleiche Initialisierungs- und Zerstörungsprozess. Im aktuellen Szenario verfügen beispielsweise sowohl das E-Mail-Formular als auch das Mobiltelefonformular über eine Überprüfungsmethode (validateData) und eine Methode zum Abrufen von Formulardaten (getFormData). In diesem Fall können Sie die von vue bereitgestellte Hybridfunktion verwenden. Weitere Abstraktion mixins.js

export default {
 methods: {
  validateData() {
   return Promise.resolve()
  },
  getFormData() {
   return {}
  }
 }
}

email-form.vue

<script>
import minx from &#39;./mixins&#39;
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: &#39;example@example.com&#39; }
  }
 }
}
</script>

Wenn Sie benutzerdefinierte Anforderungen haben, können Sie die Methoden in Mixins überschreiben.

Anwendung von Tabellen

Tabellen werden häufig in Management-Hintergrundprojekten verwendet. Wir hoffen, dass der TD der Tabelle Text, Fortschrittsbalken, Kontrollkästchen usw. ist, und wir hoffen, dass er durch Übergabe einer JSON-Konfiguration gerendert werden kann. Die Verwendung der in Vue integrierten Komponentenkomponente kann eine große Rolle spielen.

Zum Beispiel, wie man eine Tabelle wie diese verwendet

<template>
 <vue-table ref="table" :columns="columns" :datum="datum"></vue-table>
</template>
<script>
export default {
  data () {
   return {
    columns: [
     { title: &#39;ID&#39;, width: &#39;30&#39;, dataKey: &#39;id&#39; },
     { title: &#39;进度组件&#39;, dataKey: &#39;progress&#39;, render: { type: &#39;progress2&#39;, max: 100, precision: 2 } }
    ],
    datum: [{ id: &#39;1&#39;, name: &#39;进度0&#39;, progress: 10 }]
   }
  }
 }
</script>

Die Implementierung der Verwendung einer Komponente in einer Tabelle

<td v-for="column of columns">
	<component :is="`${TYPE_PRE}${columns.render.type}`" :row-data="rowData" :params="columns.render"></component>
</td>

Anwendung von Formularen

In Management-Hintergrundprojekten werden häufig Formulare verwendet. Wir hoffen auch, dass eines der Elemente im Formular ein Textfeld ist Dropdown-Feld und ein Zeitauswahlfeld, Rich-Text usw. und hoffen, dass es durch Übergabe einer JSON-Konfiguration gerendert werden kann. Die integrierte Komponentenkomponente von Vue kann immer noch eine so schöne Vision verwirklichen.

Zum Beispiel eine solche Formularverwendungsmethode

<template>
  <c-form :cells="cells" ref="form">
   <button class="button is-primary" :class="{ &#39;is-disabled&#39;: isSubmitBtnDisabled }" @click.prevent="submit">提交</button>
  </c-form>
</template>
<script>
  export default {
  computed: {
   cells () {
    return [
     {
      field: &#39;name&#39;,
      label: &#39;名称&#39;,
      type: &#39;textfield&#39;,
      attrs: { placeholder: &#39;名称&#39; },
      validate: { required: { message: &#39;请输入名称&#39;} }
     },
     {
      field: &#39;enable&#39;,
      label: &#39;启用标志&#39;,
      type: &#39;dropdown&#39;,
      extra: {options: [{ label: &#39;启用&#39;, value: 1 }, { label: &#39;禁用&#39;, value: 2 }] }
     }
    ]
   }
  }
 }
</script>

Die Implementierung der Verwendung einer Komponente in einem Formular

<form>
 <c-form-cell v-for="cell of cellList" :key="cell.field" :field="cell.field">
  <component
	 :is="`${TYPE_PRE}${cell.type}`"
	 :field="cell.field"
	 :attrs="cell.attrs"
	 :extra="cell.extra"
	 :validate="cell.validate"
	 :cells="cell.cells">
  </component>
 </c-form-cell>
</form>

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie ASP.NET und Ajax

Ajax asynchroner Upload in jquery

Detaillierte Erklärung der Ajax-Synchronisation und Asynchronität in JQuery

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Anwendungsszenarien der integrierten Komponentenkomponenten von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!