Une brève discussion sur les scénarios d'application des composants intégrés de Vue

Cet article présente principalement les scénarios d'application des composants intégrés de Vue. Maintenant, je le partage avec vous et vous donne une référence.

Instructions officielles

Rendez un "méta-composant" en tant que composant dynamique. Le composant rendu dépend de la valeur de is.

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

Pour plus de détails, vous pouvez trouver le

Composant dynamique

composant intégré

Scène< dans la documentation du site officiel 🎜>

Voici un scénario commercial pour illustrer l'application des composants intégrés de Vue. Comme le montre la figure, la page d'inscription classique est présentée ici. L'inscription est divisée en inscription par courrier électronique et inscription par téléphone portable. Il y a une étiquette en haut de la fenêtre contextuelle pour changer le type d'inscription. informations du formulaire. L'enregistrement par e-mail et l'enregistrement par téléphone mobile ont un contenu de formulaire différent. Le bouton d'enregistrement et d'autres actions se trouvent en bas. Après analyse, l'interface d'inscription par téléphone mobile et l'interface d'inscription par e-mail sont les mêmes à l'exception du contenu incohérent du formulaire au milieu.

Dans la conception réelle du code de projet, il existe des solutions réalisables pour garantir la réutilisabilité et la maintenabilité. Ici, nous utilisons le composant intégré de vue pour y parvenir.

Implémentation du code principal

Lorsque l'onglet supérieur est commuté, la valeur du type change et les composants de formulaire correspondants changent également

<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

Lors de l'utilisation des composants intégrés de Vue, les composants réellement rendus ont généralement certains points communs, tels que les mêmes attributs. même méthode ou même processus d’initialisation et de destruction. Par exemple, dans le scénario actuel, le formulaire de courrier électronique et le formulaire de téléphone mobile disposent tous deux d'une méthode de vérification (validateData) et d'une méthode d'obtention des données du formulaire (getFormData). Dans ce cas, vous pouvez utiliser la fonction de mixage fournie par vue. Abstraction plus poussée

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>

Si vous avez des exigences personnalisées, vous pouvez réécrire les méthodes dans les mixins.

Application des tableaux

Les tableaux sont souvent utilisés dans les projets de fond de gestion. Nous espérons que le td du tableau est du texte, une barre de progression, une case à cocher, etc., et nous espérons qu'il pourra être restitué en passant une configuration json. L'utilisation du composant intégré de vue peut jouer un grand rôle.

Par exemple, comment utiliser un tableau comme celui-ci

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

L'implémentation de l'utilisation du composant dans le tableau

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

Application des formulaires

Dans les projets de fond de gestion, les formulaires sont souvent utilisés. Nous espérons également que l'un des éléments du formulaire est un. zone de texte, zone déroulante, zone de sélection d'heure, texte enrichi, etc., et j'espère qu'il pourra être restitué en passant une configuration json. Le composant intégré de Vue peut toujours réaliser une si belle vision.

Par exemple, cette façon d'utiliser le formulaire

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

L'implémentation de l'utilisation du composant dans le formulaire

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Comment implémenter ASP.NET et Ajax

Téléchargement asynchrone Ajax dans jquery

Explication détaillée de la synchronisation ajax et de l'asynchronisme dans jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!