1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件绑定向父组件传递值和事件。 代码如下:
获取过来的扩展字段 需要绑定的model 为item.extendKey
<div class="form-group" v-for="item in extendTypes">
1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件绑定向父组件传递值和事件。 代码如下:
<div class="form-group" v-for="item in extendTypes">
子组件通过 props 来接受 父的值,接受后 可以想data 一样直接拿来使用。
子组件内部 通过 $.emit( 父组件方法名,value) 方法向父组件传值,父组件拿到值 并触发父组件的事件了。
这种方式现在看来是个坑啊 因为子组件对数据会有个缓存,每次不是新生成一个 input框,而是看之前有没有生成过,有的话就不生成了,所以数据有个缓存,清除不了 简直换个更简单的方式
// 既不需要用v-model绑定 也不需要用到子组件 将赋值和取值分开来 而不是用 v-model去绑定,这里取值用到 ref
<input class="form-control" :value="extendTypesModel[item.extendKey]" @input="handleUpdate(item.extendKey,index)" ref="ipt">
ref绑值取值ref给元素或者子组件注册引用信息,绑定在this.ref绑值取值ref给元素或者子组件注册引用信息,绑定在this.refs 上边。如果是v-for 遍历的话,绑定的就是个数组。
一般通过 $ref.name.value 来取值
原文链接:https://www.f2er.com/vue/31739.html