vue使用this.$message不生效的部分原因及解决方案
更新时间：2023年09月26日 08:45:28 作者：爱意迷了眼丶
这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue使用this.$message不生效的部分原因
目前message使用的过程中，已知的有两点原因，会造成message不生效。
1.是this指向问题
解决办法是：
在关键位置，let _this = this
------ let _this = this ------
2.是message的层级问题
可能有的页面设置的层级太高，遮挡住message
解决办法是：
设置class，给class定义样式的z-index属性
// js
this.$message({
message: '成功展示666我嘞宝贝',
type: 'success',
customClass: 'messageIndex'
})
// css
.messageIndex {
z-index: 99999 !important;
}
TypeError: this.$message is not a function报错情况解决
在最近负责的一个前端项目中，使用this.$message报错了，之前也没注意，然后这次抽空看了一下问题报错原因是因为我用了这种提示写法：
首先，我最开始是用基础写法：
但是这种写法有个弊端，
就是如果你当前页面有弹框的时候，这个提示信息会在遮罩层下面，导致提示信息的明显都不高，甚至可能会被弹框遮住：
然后这里有
两种解决方案
1.适合于你不负责这个项目，用的次数比较少，或者你也不想去配置，就想当前页面用一下：
首先，在你要用的页面去引入
import { Message } from "element-ui";然后在提示信息的地方写：
Message({
type: "warning",
message: "必须选则一个模板且仅能选择一个！"
});或者：
Message.warning("必须选则一个模板且仅能选择一个！");这两种都是可以的
2.适合于你负责的项目，之后肯定会经常用到，首先找到项目的plugin.js文件，这个文件一般在utils文件目录下，这个文件一般都是负责整个项目的全局配置属性
然后同样的先引入Message:
然后导出Message：
export default {
// 全局注册message
Vue.prototype.$message = Message;
}引入后就可以直接写了：
this.$message({
type: "warning",
message: "必须选则一个模板且仅能选择一个！"
});或者直接：
this.$message.warning("必须选则一个模板且仅能选择一个！");最终效果显示：
具体代码逻辑要看每个项目不同的配置写法，我这个是vue项目，提供的是一种方法，具体要往哪里写，各位看官自行研究
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
关于Vue3中element-plus的el-dialog对话框无法显示的问题及解决方法
最近今天在写一个停车场管理系统的项目时,在用vue3写前端时,在前端模板选择上,我一时脑抽,突然决定放弃SpringBoot,选择了以前几乎很少用的element-plus,然后果不其然,错误连连,下面给大家分享dialog对话框无法显示的原因,感兴趣的朋友一起看看吧2023-10-10
最近使用vue做用户的登录/退出,在开发过程中遇到的一些问题,记录下来,下面这篇文章主要给大家介绍了关于vue项目退出登录清除store数据的三种方法,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了基于vue的video播放器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
Vue.js每天必学之组件与组件间的通信,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了vue递归生成树状结构的示例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要为大家详细介绍了vue实现表格分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Vue Element UI 表单自定义效验规则及使用,文中通过代码介绍了常见表单效验规则，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue 代码压缩优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家介绍了npm run dev报错信息及解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了Vue中通过Vue.extend动态创建实例的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
最新评论