vuev-model動態(tài)生成詳解

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

<script>
export default {
// 接收父組件傳遞過來的狀態(tài)（值）
 props: {
  type: Number,  //0 input框 1 文本域
  value: String  // 值有時候編輯狀態(tài)也是先要獲取值的 類似 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('input', value)
  }
 }
}
</script>

//父組件
//extendTypes 動態(tài)獲取過來的擴展字段 需要綁定的model 為item.extendKey

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

// model是動態(tài)的，不可以寫死，只能在本地先定義一個json extendTypesModel，在獲取過來后臺的數(shù)據(jù)之后，本地賦值為空
this.extendTypesModel = {}
if (res && res.code === 0) {
  for (let i = 0; i < res.data.length; i++) {
  this.extendTypesModel[res.data[i].extendKey] = ''
}
  this.extendTypes = res.data
}

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

<div 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">
   </div>
   <div class="text-danger" v-if="item.isRequired === 1">*</div>
</div>

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