好资源导航 » 文章资讯 » vue v-model动态生成详解

vue v-model动态生成详解

2023-09-10 22:58:06 154

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

//子组件

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

//model是动态的，不可以写死，只能在本地先定义一个jsonextendTypesModel，在获取过来后台的数据之后，本地赋值为空
this.extendTypesModel={}
if(res&&res.code===0){
for(leti=0;i
//父组件注册的事件
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来取值

返回顶部
514930285
czq8825@qq.com

vue v-model动态生成详解

热门推荐

随机推荐