js/vue如何实现函数(方法)当做参数传递

 更新时间:2026年03月25日 08:42:56   作者:蓝胖子的多啦A梦  
这篇文章主要介绍了js/vue实现函数(方法)当做参数传递方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

很简单

不带方法括号当做参数传递就可以了

例子

       //测试方法
       demo(){
          alert('我是测试')
       },
       haha(event){
        this.clickEnter(event,this.demo) //this.demo是方法,但是这里当做参数传递
     }  

this.clickEnter()是公共方法,

//接收
        Vue.prototype.clickEnter = function(e,method){//e对应传递的第一个参数 ,method是你传递的方法
            let key = e.keyCode;
            if(key == 13){
                method()
            }
            
        }

最后执行成功,总结 传递方法名不带括号就可以了

需求

项目中所有按钮增加确认提示框

封装confirm 组件,但是有些点完 确定按钮后 还需再调用列表接口 实现刷新当前表格功能

需要将方法名 作为参数,传给提示框,提示框里点击了确认按钮后进行调用

首先在 utils-------> infoMsg.js 文件里

定义一个 提示框函数

将需要展示的数据 作为参数传进来

全部代码

apiName:'接口名称', 
params:'调取接口传的参数', 
refreshList:'点击确定按钮需要调取的列表方法刷新页面', 
isElse:'接口返回错误提示时是否需要调取列表方法刷新页面',
type:'notify通知框的类型', 
that
// 出库按钮  确认提示框
function popConfirm(apiName, params, refreshList, isElse, type, that) {
    console.log(that, 'reMethods')
    that.$confirm(
        window.vm.$i18n.t("tips.excutOp"),
        window.vm.$i18n.t("tips.tip"),
        {
            confirmButtonText: window.vm.$i18n.t("backTips.confirm"),
            cancelButtonText: window.vm.$i18n.t("backTips.cancel"),
            type: "warning",
        }
    ).then(() => {
        apiName(params).then((res) => {
            // 有返回状态值
            if (res.code == 0 && res.msg) {
                that.$notify({
                    title: res.msg,
                    type: 'success'
                });
                if (refreshList) {
                    refreshList()
                }
            } else if (res.code == 0 && res.msg == '') {
                that.$notify({
                    title: window.vm.$i18n.t("tips.issue"),
                    type: 'success'
                });
                if (refreshList) {
                    refreshList()
                } else {
                    if (isElse == true) {
                        refreshList()
                    }
                    that.$notify({
                        title: res.msg,
                        type: type
                    });
                }
            }

        }).catch((error) => {
            that.$notify({
                title: error.response.data.message,
                type: type
            });
            refreshList()
        });
    })
}

export default { popConfirm, }

页面使用

<el-button icon="el-icon-tickets" size="mini" type="primary"  @click="handleBatchOut">
            批量出库
</el-button>
methods:{
  // 批量出库
    handleBatchOut() {
      let delData = [];
      delData = this.crud.selections.map((item) => {
        return item.id;
      });
      let data = {
        pids: delData,
        singleOut: false,
      };
      this.$infoMsg.popConfirm(outStoragePos, data, this.bothRefresh, false, 'error', this)
    },
}
  // 批量出库
    handleBatchOut() {
      let delData = [];
      delData = this.crud.selections.map((item) => {
        return item.id;
      });
      let data = {
        pids: delData,
        singleOut: false,
      };
      this.$infoMsg.popConfirm(outStoragePos, data, this.bothRefresh, false, 'error', this)
    },
    //弹框刷新使用
    bothRefresh() {
      this.crud.toQuery();
      this.fathermethod();
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue2使用cube-ui 实现搜索过滤、高亮功能

    Vue2使用cube-ui 实现搜索过滤、高亮功能

    cube-ui 是基于 Vue.js 实现的精致移动端组件库,由于很长一段时间没有学习cube-ui 的功能实现示例代码了,今天通过本文给大家介绍下Vue2使用cube-ui 实现搜索过滤、高亮功能,感兴趣的朋友跟随小编一起看看吧
    2023-01-01
  • <el-button>点击后如何跳转指定url链接

    <el-button>点击后如何跳转指定url链接

    这篇文章主要介绍了<el-button>点击后如何跳转指定url链接问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3中ref动态绑定的技巧详解

    vue3中ref动态绑定的技巧详解

    这篇文章主要为大家详细介绍了vue3中ref动态绑定的相关技巧,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2024-01-01
  • 基于vue+canvas的excel-like组件实例详解

    基于vue+canvas的excel-like组件实例详解

    a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能.这篇文章主要介绍了基于vue+canvas的excel-like组件,需要的朋友可以参考下
    2017-11-11
  • 在Vue中使用xlsx组件实现Excel导出功能的步骤详解

    在Vue中使用xlsx组件实现Excel导出功能的步骤详解

    在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下
    2023-10-10
  • JavaScript之实现一个简单的Vue示例

    JavaScript之实现一个简单的Vue示例

    这篇文章主要介绍了JavaScript之实现一个简单的Vue示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue基于环境变量统一的多级路径部署终极指南

    Vue基于环境变量统一的多级路径部署终极指南

    这篇文章主要为大家详细介绍了一个完整的解决方案,从环境变量配置到Nginx部署,确保你的Vue项目可以灵活部署在任何路径下,下面小编就为大家简单介绍一下吧
    2025-08-08
  • vue-antd form组件封装全过程

    vue-antd form组件封装全过程

    这篇文章主要介绍了vue-antd form组件封装全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue前端整合Element Ui的教程详解

    Vue前端整合Element Ui的教程详解

    这篇文章主要介绍了Vue前端整合Element Ui,本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • Vue 动态组件与 v-once 指令的实现

    Vue 动态组件与 v-once 指令的实现

    这篇文章主要介绍了Vue 动态组件与 v-once 指令的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02

最新评论