1.input 輸入框 v-model 綁定的字段名需要根據后臺返回的數據動態生成，此時就不可以用 v-model綁定，而是用傳統的方法 value 動態綁定，并且用子組件綁定向父組件傳遞值和事件。 代碼如下：

//子組件<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('input', value)  } }}</script>

//父組件//extendTypes 動態獲取過來的擴展字段 需要綁定的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是動態的，不可以寫死，只能在本地先定義一個json extendTypesModel，在獲取過來后臺的數據之后，本地賦值為空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}

父子組件通過自定義屬性和自定義事件實現通信。

父組件 自定義屬性 v-bind 將父的值傳給子

子組件通過 props 來接受 父的值，接受后 可以想data 一樣直接拿來使用。

子組件內部 通過 $.emit( 父組件方法名，value) 方法向父組件傳值,父組件拿到值 并觸發父組件的事件了。

這種方式現在看來是個坑啊 因為子組件對數據會有個緩存，每次不是新生成一個 input框，而是看之前有沒有生成過，有的話就不生成了，所以數據有個緩存，清除不了 簡直換個更簡單的方式

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