Explication détaillée des étapes d'utilisation des composants dans Vue

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation des composants dans Vue. Quelles sont les précautions lors de l'utilisation des composants dans Vue. Voici des cas pratiques, jetons un coup d'œil.

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

Composant dynamique

Composant intégré

Scène

Voici un scénario commercial pour illustrer l'application des composants intégrés de Vue. Comme le montre l'image, voici la

page d'inscription classique. L'inscription est divisée en inscription par e-mail 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. au milieu se trouvent les informations du formulaire d'inscription. L'enregistrement par e-mail et l'enregistrement par téléphone mobile sont différents, en bas se trouvent le bouton d'enregistrement et d'autres opérations. 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 './mixins'
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: 'example@example.com' }
  }
 }
}
</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: 'ID', width: '30', dataKey: 'id' },
     { title: '进度组件', dataKey: 'progress', render: { type: 'progress2', max: 100, precision: 2 } }
    ],
    datum: [{ id: '1', name: '进度0', 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: 'name',
      label: '名称',
      type: 'textfield',
      attrs: { placeholder: '名称' },
      validate: { required: { message: '请输入名称'} }
     },
     {
      field: 'enable',
      label: '启用标志',
      type: 'dropdown',
      extra: {options: [{ label: '启用', value: 1 }, { label: '禁用', 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>

Les formulaires et les tableaux sont implémentés dans le projet open source du moteur backend basé sur VUE. Star et fork sont les bienvenus.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse de la fonction de partage de temps JS

Explication détaillée des étapes pour introduire l'icône d'icône dans le projet Vue

Explication détaillée des étapes de transmission des paramètres du tableau au contrôleur à l'aide de js

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!