Introduction à la génération dynamique de vue v-model

Cet article partage avec vous les points de connaissances pertinents et des exemples de codes de génération dynamique de vue v-model. Les amis intéressés peuvent s'y référer pour référence.

1. Les noms de champs liés au modèle v de la boîte de saisie doivent être générés dynamiquement en fonction des données renvoyées par l'arrière-plan. Pour le moment, la liaison du modèle v ne peut pas être utilisée, mais la méthode traditionnelle. La liaison dynamique de valeur est utilisée et utilise la liaison du composant enfant pour transmettre les valeurs et les événements au composant parent. Le code est le suivant :

//子组件
<template>
 <input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">
 <textarea v-else :value="currentValue" @change="handleInput"></textarea>
</template>

<script>
export default {
// 接收父组件传递过来的状态（值）
 props: {
  type: Number,  //0 input框 1 文本域
  value: String  // 值有时候编辑状态也是先要获取值的 类似 v-model
 },
 data() {
  return {
   currentValue: this.value
  }
 },
 methods: {
  handleInput(e) {
   let value = e.target.value
   if (value === this.currentValue) {
    return
   } else {
    this.currentValue = value
   }
   this.$emit(&#39;input&#39;, value)
  }
 }
}
</script>

//父组件
//extendTypes 动态获取过来的扩展字段 需要绑定的model 为item.extendKey

<p class="form-group" v-for="item in extendTypes">
  <p>
   <ad-input :value="extendTypesModel[item.extendKey]" :type="item.type" @input="handleUpdate(item.extendKey, $event)">
   </ad-input>
  </p>
</p>

// model是动态的，不可以写死，只能在本地先定义一个json extendTypesModel，在获取过来后台的数据之后，本地赋值为空
this.extendTypesModel = {}
if (res && res.code === 0) {
  for (let i = 0; i < res.data.length; i++) {
  this.extendTypesModel[res.data[i].extendKey] = &#39;&#39;
}
  this.extendTypes = res.data
}

//父组件注册的事件
handleUpdate(key, value) {
 this.extendTypesModel[key] = value
}

Les composants parent et enfant communiquent via des propriétés personnalisées et des événements personnalisés.

L'attribut personnalisé du composant parent, v-bind, transmet la valeur du parent à l'enfant

Le composant enfant accepte la valeur du parent via les accessoires. Après acceptation, cela peut être comme. direct en tant que données Utilisez-le.

Le composant enfant transmet la valeur au composant parent via la méthode $.emit (nom de la méthode du composant parent, valeur). Le composant parent obtient la valeur et déclenche l'événement du composant parent.

Cette méthode semble être un écueil maintenant car le sous-composant aura un cache pour les données. Il ne génère pas une nouvelle zone de saisie à chaque fois, mais vérifie si elle a déjà été générée. elle ne sera pas générée. , donc les données ont un cache, et si elles ne peuvent pas être effacées, c'est simplement un moyen plus simple

<p class="form-group" v-for="(item, index) in extendTypes">
  <label class="control-label">{{item.extendName}}</label>

  // 既不需要用v-model绑定 也不需要用到子组件 将赋值和取值分开来 而不是用 v-model去绑定，这里取值用到 ref

    <input class="form-control" :value="extendTypesModel[item.extendKey]" @input="handleUpdate(item.extendKey, index)" ref="ipt">
   </p>
   <p class="text-danger" v-if="item.isRequired === 1">*</p>
</p>

handleUpdate(key, index) {
  this.extendTypesModel[key] = this.$refs.ipt[index].value
}

ref lie la valeur pour obtenir la valeur ref enregistre le informations de référence pour l'élément ou le sous-composant, les lie à this.ref et lie la valeur. La valeur ref est utilisée pour enregistrer les informations de référence pour les éléments ou les sous-composants et est liée à this.refs. S'il s'agit de v-for traversal, la liaison est un tableau.

Utilisez généralement $ref.name.value pour obtenir la valeur

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention à PHP Chinese net !

Recommandations associées :

Comment implémenter des instructions de chargement simples avec Vue Infinite

v-for in vue charge une image statique locale méthode

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!