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项目，提供的是一种方法，具体要往哪里写，各位看官自行研究
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue子组件封装弹框只能执行一次的mounted问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家介绍了vue3鼠标拖拽滑动效果实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
Vue中v-if、v-if-else、v-else-if与v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染,这篇文章主要给大家介绍了关于Vue中v-if、v-if-else、v-else-if与v-show的基本使用,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了VUE实现图片验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)
这篇文章主要介绍了uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue中内置了很多的指令,但有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候我们就需要用到vue中一个很强大的功能了—自定义指令,这篇文章主要给大家介绍了关于vue中自定义指令（directive）的基本使用方法,需要的朋友可以参考下2021-09-09
今天小编就为大家分享一篇vue 实现v-for循环回来的数据动态绑定id，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
这篇文章主要介绍了解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论