vue父子组件传值(form表单)
// 父组件 监听子组件的input事件**@input="($event) => {form.materials[i] = $event}**<ipc-listv-for="(material, i) in form.materials":value="material":dataSource="form.dataSource":index="i":materialsLength="
·
使用场景:
子组件 form 表单中输入的值,子组件不用提交,在父组件中直接可以显示
解决方案:通过触发input的原生input事件
主要代码:
父:`@input="($event) => {form.materials[i] = $event}`
子:`this.$emit('input', val)
父组件 监听子组件的input事件 @input="($event) => {form.materials[i] = $event}
<ipc-list
v-for="(material, i) in form.materials"
:value="material"
:dataSource="form.dataSource"
:index="i"
:materialsLength="form.materials.length"
:key="material.id"
@input="($event) => {form.materials[i] = $event}
>
</ipc-list>
子组件 ipc-list中的主要部分代码
props: {
value: {
type: Object
}
}
data () {
return {
material: null
}
}
// watch 进行深度监听 value:父组件传给子组件的值
watch: {
value: {
handler (val) {
this.material = JSON.parse(JSON.stringify(val))
},
deep: true,
immediate: true
},
material: {
handler (val, old) {
// 子组件触发input事件,父组件动态监听子组件数据 this.$emit('input', val)
this.$emit('input', val)
},
deep: true
}
},
html 直接绑定data中定义的数据 material
<el-form :model="material" :rules="rules" ref="formName" label-width="90px">
.....
</el-form>
PS:监听键盘事件-改变输入框的值类型
<el-input
v-model="material.port"
:maxlength="5"
@keyup.native="channelReplaceIllegal"
:placeholder="$t('common.placeholderInput') + $t('program.ipcList.port')"
></el-input>
// 改变输入框的值类型 string -> number
channelReplaceIllegal (e) {
e.target.value = e.target.value.replace(/[^\d]/g, '')
},
更多推荐
已为社区贡献3条内容
所有评论(0)