vue父子组件传值（form表单）

使用场景：

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