js/vue怎么把函数(方法)当做参数传递（已解决）

最新推荐文章于 2024-05-09 22:36:59 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-05-09 22:36:59 发布

阅读量1.1k

点赞数

分类专栏： vue js 方法文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Maxueyingying/article/details/129619721

版权

vue 同时被 3 个专栏收录

98 篇文章 4 订阅

订阅专栏

方法

72 篇文章 1 订阅

订阅专栏

67 篇文章 1 订阅

订阅专栏

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

例子

       //测试方法
       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();
    },