zoukankan      html  css  js  c++  java
  • Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作

    需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象,里面包含客户的所有信息,通过下拉列表可以获取客户姓名,但是一旦选取之后,客户姓名这个字段就固定了,即为客户的id,所以想通过<template slot-scope="scope">{{scope.row.XXX}}</template>这种方式是拿不到的,然后想通过value-key的形式呢,发现这个已经封装好的组件中还不支持折中value-key的方式,只有下拉列表选择发生变化时,触发change事件,this.$emit('select', item),那么在父组件中通过接收事件,就可以获取item,是这样的:

    <el-table-column prop="patientid" label="客户姓名">
    <template slot-scope="scope">
    <span v-if="id">{{scope.row.patientName}}</span>
    <template v-else>
    <ever-patient-select @select="selectPatient(item)" v-model="scope.row.patientid"></ever-patient-select>
    </template>
    </template>
    </el-table-column>

    但是问题来了,由于table有多行,如何知道事件发生在哪一行,然后修改对应的行的客户编号呢?我们知道table中可以传入scope.$index,来标记行,然后修改table的data[index].patientCode就可以了,但是问题就在于如果直接将$index放进函数,@select="selectPatient($index,item)"或是这样@select="selectPatient(item,$index)",你会发现都不好使,都会影响子组件向外传递他的item值,

    那么有没有方法,既不影响子组件向外传递的值,又可以在函数中添加自己的额外参数呢,经过一番查找,发现是可以的,可以这样写@select="selectPatient($event, $index)",然后在处理函数中第一个参数就是子组件传出的item的对象值,第二个就是index标识。

    目的达到了,需求也完成了,那么我们不禁要问,这个$event究竟是个什么东东呢?

    去官网查找,找到了这样一个例子:

    /*************2018-12-03**************/ 

    到这里本以为结束了,发现一个问题,如果子组件想传多个参数出来,比如$emit("change", arg1,arg2,...),使用$event是否依然可以代表子组件传出来的值?经过测试,发现如果如父组件中依然使用@select="selectPatient($event, $index)"这样的写法,发现$event只代表第一个参数arg1,所以这样的话,可以能子组件就要改变写法了,把所有参数包装成一个对象,$event就可以传过来了。

  • 相关阅读:
    Idea如果添加Maven模块
    idea在debugger模式下无法启动,但是在run模式下可以启动的问题
    Idea搭建SpringMVC框架(初次接触)
    Intellij IDEA 环境 tomcat 启动设置
    Winform .NET 利用NPOI导出大数据量的Excel
    unity3D AudioMixer+Slider实现音量调节,多音效控制(主音量,背景音,特效音等)
    unity3D 点击按钮暂停和继续游戏
    unity3D AsyncOperation异步加载场景&百分比效果
    unity3D 实现2D游戏背景层交错感(视觉差)
    unity3D 重新加载当前场景&加载当前场景的下一个场景
  • 原文地址:https://www.cnblogs.com/liujiekun/p/10049292.html
Copyright © 2011-2022 走看看