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

本文链接：https://blog.youkuaiyun.com/ZHANGJIN9546/article/details/103807180

在Vue项目操作数据时遇到Model框内this.$message提示失效的问题。解决方案包括利用全局变量Vue.prototype调用$message方法，或者通过重新定义this来确保其指向正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天写项目的时候发现了这个问题。
问题再现：在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
                }
            })
        },