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

最新推荐文章于 2024-07-04 23:32:58 发布

s小布丁

最新推荐文章于 2024-07-04 23:32:58 发布

阅读量3.3k

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/m0_49529959/article/details/118566335

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍如何在 Vue 中，通过监听子组件的 input 事件，实现在父组件直接获取并显示子组件 form 表单的输入值，无需子组件提交。关键代码包括使用 `$emit` 触发原生事件，并展示深度监听和数据绑定的实现方式。

摘要由CSDN通过智能技术生成

使用场景：

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