添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

在vue开发中我们经常用到控件提供的事件方法,比如el-select的@change方法,比如el-upload的on-success方法,这些方法是有默认回调参数的,这时候如果想自己再传递别的参数,该如何处理呢?

方法很简单,

(defaultParam) => { handleMethod(defauleParam, customerParam) }

handlemethod是调用的方法,比如el-select的@change方法

defauleParam是默认的回调参数,比如change方法的value,这个回调参数如果本身有多个的话,可以根据需求,指定自己需要就可以了

customerParam是自定义参数,可以传自己需要的参数

el-select举例

//控件调用
<el-select v-model="ruleForm.typeId"
           placeholder="请选择产品分类"
           @change="(val) =>{ onTypeChangeTest(val, 2) }">
    <el-option v-for="item in productClassifyOptions"
               :key="item.id"
               :label="item.typeName"
               :value="item.id"/>
</el-select>
//methods中方法实现,val是默认参数,type是自定义参数
onTypeChangeTest(val, type){
      window.console.log(val)
      window.console.log(type)

el-upload举例

//在el-table的el-table-column使用el-upload,需要将scope.row当做参数传递,处理数据
<template slot-scope="scope">
    <div style="display: flex">
        <span style="color: red">*</span>
        <el-upload
            class="avatar-uploader"
            :action="urlOrder"
            :headers="headers"
            name="image"
            :show-file-list="false"
            :on-success="(res) => {
                handleAvatarSuccess(res,scope.row)
            :before-upload="beforeAvatarUpload">
         <img v-if="scope.row.image" :src="scope.row.image" class="iconImg">
         <i v-else class="el-icon-plus iconImg-uploader-icon"></i>
        </el-upload>
</template>
//method中的方法,如果上传成功,给数据赋值
handleAvatarSuccess(res,row) {
    if (res.code == 0) {
        this.$set(row, "image", res.data.url)
Tips:本文拿 ElementUI 框架为例,其他框架同理,都可以参考本文。
在 Vue 项目,使用 ElementUI 组件时,一些组件都有 回调方法(Event),如下代码所示:
<el-radio
v-model="radio"
@change="hanlChange"
>备选项</el-radio>
拿到回调参数也非常简单,如下代码所示:
hanlChange(e){
	console.log(e)//Object
这样也是错误的:@cha
  method1 : function ( event) {
    var aaa='test'; //a是菜种操作产生的结巢,这里演示定义了一个空对象
    return aaa;   // 返回想要的值
  method2 : function (event) {
  var aaa1 = this.method1(); /..
vue的父子组件传值方式:父传子、子传父
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递
父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
一、父传子
<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
				
在项目开发过程,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 。关于directive的使用方式这里就不做过多的介绍了,Vue官方文档说的还是听明白的。今天讲讲在使用Vue自定义指令过程 1. 怎么数据传递到自定义指令 2.怎么讲自定义指令的数据传回到组件实例 一、将数据传递到自定义指令 <li class="table-columns...
Vue组件传参一共有三种类型,即父向子传参,子向父传参,兄弟之间传参(只要不是父子关系就都是兄弟组件) 1.父向子传参: 父组件向子组件共享数据需要使用自定义属性----props 比如我们有父组件 Father 和 子组件 Son。如果需要父向子传参时,则需要在子组件Son添加一个props(与data平级)。在props可以添加自定义属性,属性名自己取。比如fromfather:{default:0, type:Number} 传参时只需要在父组件使用子组件<Son :fromfather=
vuemethod方法相互调用,该方法不存在 method方法相互调用一般都会是this.functionName() 原本以为是没有任何问题的,但是方法方法之间的调用就会出幺蛾子。 网上其它博客上说的 调用的时候使用 this.$options.methods.test2(); this.$options.methods.test2.bind(this)(); 我试了无效,可能是用的地方不对吧! 例如method有三个函数 A() 、B()、 C() 一般的简单调用 ,两两之间
<div class="shopLine" @click="goDetails(item.id)" v-for="item,index in cart"> <button @click="goThird">点击跳转第二种方式传参</button> <button @click="goSi">点击跳转第三种方式传参</button> 在m...