快捷導(dǎo)航

js/vue如何實(shí)現(xiàn)函數(shù)(方法)當(dāng)做參數(shù)傳遞

更新時(shí)間：2026年03月25日 08:42:56 作者：藍(lán)胖子的多啦A夢(mèng)

這篇文章主要介紹了js/vue實(shí)現(xiàn)函數(shù)(方法)當(dāng)做參數(shù)傳遞方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

很簡(jiǎn)單

不帶方法括號(hào)當(dāng)做參數(shù)傳遞就可以了

例子

       //測(cè)試方法
       demo(){
          alert('我是測(cè)試')
       },
       haha(event){
        this.clickEnter(event,this.demo) //this.demo是方法,但是這里當(dāng)做參數(shù)傳遞
     }

this.clickEnter()是公共方法,

//接收
        Vue.prototype.clickEnter = function(e,method){//e對(duì)應(yīng)傳遞的第一個(gè)參數(shù) ,method是你傳遞的方法
            let key = e.keyCode;
            if(key == 13){
                method()
            }
            
        }

最后執(zhí)行成功，總結(jié) 傳遞方法名不帶括號(hào)就可以了

需求

項(xiàng)目中所有按鈕增加確認(rèn)提示框

封裝confirm 組件，但是有些點(diǎn)完確定按鈕后還需再調(diào)用列表接口實(shí)現(xiàn)刷新當(dāng)前表格功能

需要將方法名作為參數(shù)，傳給提示框，提示框里點(diǎn)擊了確認(rèn)按鈕后進(jìn)行調(diào)用

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

定義一個(gè) 提示框函數(shù)

將需要展示的數(shù)據(jù) 作為參數(shù)傳進(jìn)來

全部代碼

apiName：'接口名稱', 
params：'調(diào)取接口傳的參數(shù)', 
refreshList：'點(diǎn)擊確定按鈕需要調(diào)取的列表方法刷新頁(yè)面', 
isElse:'接口返回錯(cuò)誤提示時(shí)是否需要調(diào)取列表方法刷新頁(yè)面',
type：'notify通知框的類型', 
that

// 出庫(kù)按鈕  確認(rèn)提示框
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) => {
            // 有返回狀態(tài)值
            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, }

頁(yè)面使用

<el-button icon="el-icon-tickets" size="mini" type="primary"  @click="handleBatchOut">
            批量出庫(kù)
</el-button>

methods：{
  // 批量出庫(kù)
    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)
    },
}
  // 批量出庫(kù)
    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();
    },