MessageBox单独引用时报错

Question

问题描述

当我在使用单独引用的MessageBox时，console报如下错误

TypeError: Cannot read property 'alert' of undefined

at VueComponent.open (pen.js:5)
at invokeWithErrorHandling (vue.js:1863)
at VueComponent.invoker (vue.js:2188)
at invokeWithErrorHandling (vue.js:1863)
at VueComponent.Vue.$emit (vue.js:3883)
at VueComponent.handleClick (index.js:1)
at invokeWithErrorHandling (vue.js:1863)
at HTMLButtonElement.invoker (vue.js:2188)
at HTMLButtonElement.original._wrapper (vue.js:7541)

问题出现的环境背景及自己尝试过哪些方法

我是按照官网的描述做的，由于我的运行环境是嵌入式环境，所以要控制最后生成代码的大小，所以没有把所有元素都引入进来，对用到的模块做单独引用，参考下边这段官网描述：

单独引用
如果单独引入 MessageBox：
import { MessageBox } from 'element-ui';
那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。

我直接在官网上测试，用的是使用 HTML 片段的代码，我将其Demo中的this.$alert按照上边的描述替换成了this.MessageBox.alert，然后也报了上边同样的错误。

有人知道怎么解决吗？还是这是elementUI的一个bug?

今天又测试了一下，Message和Notificaion也有同样的问题

Answer 1

和bug无关,如果这是bug,那所有的UI组件库按需导入都是这个bug.如果是css的话就罢了,组件中不用再引入,因为全局生效的,如果是js代码的组件,必须在组件中再引入一次,否则会报错,这个问题之前我回答过一遍了,看这吧https://segmentfault.com/q/10...

如果你是全局引用的话,你这么写,没问题;如果你按需引,必须在组件中把js的东西再引入一次,样式就不用引了,为什么呢.因为js和css概念不一样,你在当前组件中比如引了别人写的js代码,你不声明怎么能用?不存在这个方法.以下摘自官方文档: 如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox .如果单独引入 MessageBox：

import { MessageBox } from 'element-ui';

所以我猜测你import的代码是不是写到了main.js中了