Detaillierte Erläuterung der Schritte zur Verwendung von Komponentenkomponenten in Vue

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Komponentenkomponenten in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Komponentenkomponenten in Vue? Hier sind praktische Fälle.

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 im Bild gezeigt, ist hier die klassische Registrierungsseite in E-Mail-Registrierung und Mobiltelefon-Registrierung unterteilt. Oben im Popup-Fenster befindet sich eine Beschriftung zum Wechseln der Registrierungsart In der Mitte befinden sich die Informationen zum Registrierungsformular und die Registrierung per Mobiltelefon. Der Inhalt des Formulars unterscheidet sich, unten befinden sich die Registrierungsschaltfläche und andere Vorgänge. 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 './mixins'
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: 'example@example.com' }
  }
 }
}
</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: 'ID', width: '30', dataKey: 'id' },
     { title: '进度组件', dataKey: 'progress', render: { type: 'progress2', max: 100, precision: 2 } }
    ],
    datum: [{ id: '1', name: '进度0', 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: 'name',
      label: '名称',
      type: 'textfield',
      attrs: { placeholder: '名称' },
      validate: { required: { message: '请输入名称'} }
     },
     {
      field: 'enable',
      label: '启用标志',
      type: 'dropdown',
      extra: {options: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }] }
     }
    ]
   }
  }
 }
</script>

Implementierung der Verwendung einer Komponente im 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>

Formular und Tabellen sind im VUE-basierten Backend-Engine-Open-Source-Projekt implementiert, Sterne und Gabeln sind willkommen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Analyse der JS-Time-Sharing-Funktion

Detaillierte Erläuterung der Schritte zur Einführung des Symbolsymbols im Vue-Projekt

Detaillierte Erläuterung der Schritte zur Übergabe von Array-Parametern an den Controller über js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Komponentenkomponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!