element中this.$message 失效问题解决方法（使用全局调用，重新定义this）

谁践踏了优雅 2023-06-27 03:22 17阅读 0赞

这两天写项目的时候发现了这个问题。  
问题再现：在Model框中操作数据，在使用this.$message进行消息提示时发现，提示框失效  
。

本人解决方案（具体原因我没有找出来，写这个出来也是为了让大佬指点指点）

// 保存修改数据
            handleSaveMu(row) {
                let srcColumnSqc = row.srcColumnSqc;
                let tarColumnName = row.tarColumnName;
                let tarColumn = row.tarColumn;
                let tarColumnType = row.tarColumnType;
                let id = row.id
                let apiType = this.muFormData.apiType;
                let srcTable = this.muFormData.srcTable;
                let jobName = this.muFormData.jobName;
                editMuTable(apiType,srcTable,srcColumnSqc,tarColumnName,tarColumn,tarColumnType,jobName,id).then(res=>{
                    //console.log(res)
                    if(res.data.code ==200){
                        this.$message.success(res.data.msg)  //数据请求成功，this.$message方法失效
                        this.checkMuVisible=false  
                        this.editDisabled2 = true
                    }else{
                        this.$message.error(res.data.msg)
                        this.editDisabled2 = false
                    }
                })
            },

**解决方案一：**

可以看到后台返回的数据使用this.$message就会失效，因为 this 指的不再是Vue了，所以… …

Vue.prototype.$message({
        message: '成功！',
        type: 'success'
    });

使用全局变量Vue.prototype来调$message()就可以了。

**解决方案二：**

或者重新定义this也是可以的。如下：

handleSaveMu(row) {
       			let _this = this;  //重新定义this
                let srcColumnSqc = row.srcColumnSqc;
                let tarColumnName = row.tarColumnName;
                let tarColumn = row.tarColumn;
                let tarColumnType = row.tarColumnType;
                let id = row.id
                let apiType = this.muFormData.apiType;
                let srcTable = this.muFormData.srcTable;
                let jobName = this.muFormData.jobName;
                editMuTable(apiType,srcTable,srcColumnSqc,tarColumnName,tarColumn,tarColumnType,jobName,id).then(res=>{
                    //console.log(res)
                    if(res.data.code ==200){
                        _this.$message.success(res.data.msg)
                        _this.checkMuVisible=false
                        _this.editDisabled2 = true
                    }else{
                        _this.$message.error(res.data.msg)
                        _this.editDisabled2 = false
                    }
                })
            },