vue v-model动态生成详解
163 浏览量
2021-01-21
12:47:15
上传
评论
收藏 42KB PDF 举报
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) 方法向父组件传值,父组件拿到值 并触发父组件的事件了。
资源评论
