vuev-model动态生成详解

1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成，此时就不可以用 v-model绑定，而是用传统的方法 value 动态绑定，并且用子组件绑定向父组件传递值和事件。代码如下：

站在用户的角度思考问题，与客户深入沟通，找到犍为网站设计与犍为网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、网站建设、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖犍为地区。

//子组件

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

// 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框，而是看之前有没有生成过，有的话就不生成了，所以数据有个缓存，清除不了简直换个更简单的方式


  {{item.extendName}}

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

    
   
   *

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

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

一般通过 $ref.name.value 来取值

分享标题：vuev-model动态生成详解
转载注明：http://pwwzsj.com/article/iihsde.html

平武建站

vuev-model动态生成详解

其他资讯