Einführung in die dynamische Generierung des Vue-V-Modells

Dieser Artikel teilt Ihnen die relevanten Wissenspunkte und Beispielcodes zur dynamischen Generierung des Vue-V-Modells mit. Interessierte Freunde können als Referenz darauf verweisen.

1. Die an das Eingabefeld-V-Modell gebundenen Feldnamen müssen dynamisch basierend auf den vom Hintergrund zurückgegebenen Daten generiert werden. Derzeit kann nicht die V-Modell-Bindung verwendet werden, sondern die herkömmliche Methode Die dynamische Bindung von Werten wird verwendet, und die Bindung der untergeordneten Komponente wird verwendet, um Werte und Ereignisse an die übergeordnete Komponente zu übergeben. Der Code lautet wie folgt:

//子组件
<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
}

Übergeordnete und untergeordnete Komponenten kommunizieren über benutzerdefinierte Eigenschaften und benutzerdefinierte Ereignisse.

Das benutzerdefinierte Attribut v-bind der übergeordneten Komponente übergibt den Wert des übergeordneten Elements an das untergeordnete Element.

Die untergeordnete Komponente akzeptiert den Wert des übergeordneten Elements über Requisiten. Nach der Annahme kann es so sein direkt als Daten Verwenden Sie es.

Die untergeordnete Komponente übergibt den Wert über die Methode $.emit(Name der übergeordneten Komponentenmethode, Wert) an die übergeordnete Komponente. Die übergeordnete Komponente erhält den Wert und löst das Ereignis der übergeordneten Komponente aus.

Diese Methode scheint jetzt eine Falle zu sein, da die Unterkomponente nicht jedes Mal ein neues Eingabefeld generiert, sondern prüft, ob dies der Fall ist. Es wird nicht generiert, sodass die Daten einen Cache haben. Wenn dieser nicht gelöscht werden kann, ist dies einfach eine einfachere Möglichkeit.

<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 bindet den Wert ref an das Element oder die Unterkomponente, um Referenzinformationen zu registrieren , bindet es an this.ref bindet den Wert ref an das Element Oder die Unterkomponente registriert Referenzinformationen und bindet sie an this.refs. Wenn es sich um v-for-Traversal handelt, ist die Bindung ein Array.

Verwenden Sie im Allgemeinen $ref.name.value, um den Wert zu erhalten

Das Obige ist der gesamte Inhalt dieses Artikels, der für das weitere Lernen hilfreich ist Inhalt, bitte achten Sie auf PHP Chinese Net!

Verwandte Empfehlungen:

So implementieren Sie einfache Anweisungen zum unendlichen Laden von Vue

v-for in vue lädt lokales statisches Bild Methode

Das obige ist der detaillierte Inhalt vonEinführung in die dynamische Generierung des Vue-V-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!