Element按需加载之坑 :为什么this.$message不起作用了?

为什么this.$message不起作用了?


今天在使用elementUI的时候,准备使用this.$message来做个消息提示。顺溜地把代码写完了,一运行,发现代码报错了,

this.$message is not function

看了看,我的代码

...
import {Message} from 'element-ui'
...
Vue.use(Message)

这么写,好像没错。
然后查资料,网上查到了个示例代码,发现这么写是有问题的
正确的写法是:

...
import {Message} from 'element-ui'
...
Vue.prototype.$message=Message

然后我回到官网,看文档,在按需加载那部分,除了一大堆的Vue.use(…)之外,最后面,还有一些挂载在Vue.prototype上的写法

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

这几个用Vue.use()是没用的。
按我之前的写法处理,这么分两种处理,我感觉有点坑,如果没注意到这个最后面的写法,就会像我这样,把自己绕进去。
我还是比较欣赏vant组件的处理,用Vue.use()进行处理,然后直接挂载上了prototype上,不需要再额外自己去挂prototype

你可能感兴趣的:(vue)