使用场景:

子组件 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, '')
 },
Logo

前往低代码交流专区

更多推荐