vue v-model 动态生成

vue v-model 动态生成

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>

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

$ref 绑值取值 ref给元素或者子组件注册引用信息，绑定在 this.$refs 上边。如果是v-for 遍历的话，绑定的就是个数组。
一般通过 $ref.name.value 来取值。。。。。。