vue 项目@change多个参数传值多个事件的操作

首先是只有一个change事件

changelevel()//选择值

若想改变select同时改变row里的值

多个事件用；分割开来

此时发现changelevel()不执行那么加上（）呢

changelevel(val){  console.log(val) => //undefined}

表示未传参数 输出undefined

那么要传值传谁呢

传入$event 再次输出就可获取选择值

补充：element-ui @change添加自定义参数

element-ui的change事件默认参数是一个value值，比如下拉框的change事件默认参数是选中的value值，但是实际项目中我们要传的一般不止这一个参数，如果直接追加两个参数可能获取不到，这时需要把参数中的默认参数名换成$event即可，

//第一个参数是默认的value参数，第二个是我们自己想传入的参数

@change='selectChange($event,scope.row)'

或者使用第二种方法：

@change='(val)=>selectChange(value,scope.row)'

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。如有错误或未考虑完全的地方，望不吝赐教。

赞 (0)

相关推荐

  • Vue父子组件传值的一些坑

    在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式. 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点. 1. 问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使用得比较简单,一般不会遇到. 2. 原因剖析 核心:双向绑定 父子组件传值的时候涉及双向绑定,当传值为 object 类型时,传值之后数据源会被改变. 深拷贝与浅拷贝 下文详细讲. 3. 解决方

  • vue中@change兼容问题详解

    @change问题 1. 需求描述 需求:选择日期,当日期改变,则页面相应该日期的某些事件渲染 条件: 移动端 vue框架 2. 问题产生及描述 问题: 兼容性差距,由于@change触发方式不同,导致时间加载不够统一,时间触发出现问题. 描述如下: 使用vue做移动端时,由于需求需要,需要在页面某处添加一个日期选择的控件.由于不是面向用户,内部使用,因此本着不浪费资源的原则,直接使用h5自带的input: <input type="date"> emm...CSS样式不再

  • vue组件中传值EventBus的使用及注意事项说明

    主要想说下非父子组件之间的通信. 项目场景: 在app.vue里写了一个公共的顶部导航navbar,然后右侧有个分享按钮,而这个分享按钮只有在特定的页面才展示,项目里是在lottery.vue页面,然后想实现app.vue里点击分享按钮,触发lottery.vue里的分享方法. 解决:使用eventBus 1.创建一个event-bus.js import Vue from 'vue' export const EventBus = new Vue() 2.在app.vue引入eventbus,

  • 解决vue prop传值default属性如何使用,为何不生效的问题

    如果在template中,显示的调用了 prop 属性,那么 default 属性就不会生效 如果在template中,不调用 prop 属性,default 就会生效 default 值有效与否,和 prop 的验证通不通过,没有关系 //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTit

  • 浅谈vue中子组件传值的默认值情况

    当父组件中的content值没有传入时,子组件利用default属性设置默认值,此情况时,页面会显示default value. 当传入content的值时,default属性的默认值不生效,界面显示为: 补充知识:Vue父组件向子组件传值遇到的BUG 当子组件中含有props属性,使用ref对其中的prop属性赋值时报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent

  • vue下的@change事件的实现

    vue下的@change事件的实现

    楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下 先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="vue.js"></script> <body&g

  • vue 项目@change多个参数传值多个事件的操作

    vue 项目@change多个参数传值多个事件的操作

    首先是只有一个change事件 changelevel()//选择值 若想改变select同时改变row里的值 多个事件用:分割开来 此时发现changelevel()不执行那么加上()呢 changelevel(val){ console.log(val) => //undefined} 表示未传参数 输出undefined 那么要传值传谁呢 传入$event 再次输出就可获取选择值 补充:element-ui @change添加自定义参数 element-ui的change事件默认参数是一个

  • vue项目实现减少app.js和vender.js的体积操作

    配置webpack中externals来减少打包后vendor.js的体积 在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本质上来解决这种问题. webpack的外部扩展(externals)可以有效的解决. externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法.相反,所创建的 bundle 依赖于那些存在于用户环境(c

  • vue项目实现设置根据路由高亮对应的菜单项操作

    高亮显示菜单是很常见的一个场景 首先,在router-link标签上绑定对应的路径 然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单 也可以在router路由数组里面设置meta信息,然后根据这个信息来判断是否高亮(这里可以循环生成菜单,不过我没有写)只是说一下思路 这样即可根据路由实现对应的菜单高亮了,我个人认为第二种比较灵活,如果菜单嵌套很多可以用第二种 补充知识:vuecli项目怎样使用jsx 有时候用jsx写页面可能更灵活,当然在vue中写

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • vue实现动态表格提交参数动态生成控件的操作

    上面要求做一个根据后台数据动态生成控件,然后让用户输入提交查询信息,然后动态生成表格在显示出来.动态控件代码如下 <el-form :model="formData" style="padding: 0 5px;"> <div v-if="tableshow"> <div v-for="(item,i) in control" :key="i" style="padd

  • Vue项目获取url中的参数(亲测可用)

    目录 情况一:内部页面之间互相传值 情况二:外部跳转VUE项目时自带参数 1 获取?后面的参数 2 获取不带?的URL中的参数 亲测可用,若有疑问请私信 获取url参数有两种情况: 情况一:内部页面之间互相传值 这里先讲情况一,因为同一项目内互相传值比较简单,假如要从A页面跳转到B页面,并传值.就要在A页面这么写 this.$router.push({name:"B",query:{ Id : this.tId , ... }}) 进入B页面之后,在B页面内这么写 this.Id =

  • Electron-vue脚手架改造vue项目的方法

    1. 什么是Electron Electron可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本. 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 从开发的角度来看, Electron app

  • 如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    现在vue.js几乎是程序员必会的前端框架啦~ 今天就学习记录一下怎么运行一个vue项目 无论是Idea还是webstorm,都是一样的操作. 去网上随便找一个开源项目,以下就是操作的流程,不管是用webstorm还是idea界面都一样. 第一步:终端输入npm install命令 第二步:配置这里 第三步:第二步点开以后就是这个界面 其中,name自己随便写 package.json的路径 scripts这里写dev还是serve,看json文件配置 第四步:这就是配置文件,里面是命令 第五步

  • VUE子组件向父组件传值详解（含传多值及添加额外参数场景）

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • vue select change事件如何传递自定义参数

    目录 select change事件传递自定义参数 @change函数传自定义参数 实例 select change事件传递自定义参数 今天记录一个小问题,最近get到的一个方法,不太常用,记录一下,增强记忆吧. 之前在vue项目中,也经常使用select标签,也经常用change事件,经常用的change事件中,一直有个默认参数,就是选中的选项的信息,最近一个需求除了需了选中项信息外,还需要其他的参数. 今天记录一下这种传参方式,直接上代码. // 普通用法,没有自定义参数 @change="

随机推荐