Vue + Element 中 this.$message 失效问题解决方法

⭐️个人博客：www.caohongyuan.cn，更多分享，欢迎浏览！⭐️

Vue的Element确实给开发者提供了很大的便捷，比如消息提示中的：this.$message 函数就非常好用。但是在某些情况下是失效的，比如如下代码所示：

onSubmit: function () {
    if (this.formInline.title === '') {
        // 这里可以成功使用$message函数
        this.$message({
            message: '失败！',
            type: 'warning'
        });
    } else {
        $.post('upload',
            {
                title: this.formInline.title,
            },
            function (res) {
                // 这里使用$message函数则是失效的
                this.$message({
                    message: '成功！',
                    type: 'success'
                });
            });
    }
},

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

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

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

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

onSubmit: function () {
    var vm = this;
    if (this.formInline.title === '') {
        // 这里可以成功使用$message函数
        this.$message({
            message: '失败！',
            type: 'warning'
        });
    } else {
        $.post('upload',
            {
                title: this.formInline.title,
            },
            function (res) {
                // 这里就可以用了
                vm.$message({
                    message: '成功！',
                    type: 'success'
                });
            });
    }
},

欢迎指导！

千而の大狮子~