iview按需引入Message全局提示组件，报错，怎么解决？

Question

按需引入iview的Message全局提示组件。

import {Alert,Icon,Button,Modal,Tree,Message,} from 'iview';

import 'iview/dist/styles/iview.css'
Vue.component('Modal',Modal);
Vue.component('Tree',Tree);
Vue.component('Button',Button);
Vue.component('Icon',Icon);
Vue.component('Alert',Alert);

看了官网的教程iview Message全局提示组件

通过直接调用以下方法来使用组件：

• this.$Message.info(config)

• this.$Message.success(config)

• this.$Message.warning(config)

• this.$Message.error(config)

• this.$Message.loading(config)

然后我在我需要的地方使用上述代码

...
}else{
        console.log("检查未选项");
        this.$Message.error('检查未选项');
}
...

报错

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'error' of undefined"

found in

---> <MdButton>
       <Upload> at src\components\upload.vue
         <App> at src\App.vue
           <Root>
warn @ vue.esm.js?efeb:571
logError @ vue.esm.js?efeb:1689
globalHandleError @ vue.esm.js?efeb:1684
handleError @ vue.esm.js?efeb:1673
Vue.$emit @ vue.esm.js?efeb:2455
click @ vue-material.js?2e0c:12
invoker @ vue.esm.js?efeb:1943
fn._withTask.fn._withTask @ vue.esm.js?efeb:1778
vue.esm.js?efeb:1693 TypeError: Cannot read property 'error' of undefined
    at VueComponent.subimtBtn (upload.vue?b0d8:165)
    at boundFn (vue.esm.js?efeb:186)
    at Proxy.invoker (vue.esm.js?efeb:1943)
    at Proxy.Vue.$emit (vue.esm.js?efeb:2453)
    at click (vue-material.js?2e0c:12)
    at invoker (vue.esm.js?efeb:1943)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1778)

请教各路大佬..谢谢

Answer 1

import {Alert,Icon,Button,Modal,Tree,Message,} from 'iview';

import 'iview/dist/styles/iview.css'
Vue.component('Modal',Modal);
Vue.component('Tree',Tree);
Vue.component('Button',Button);
Vue.component('Icon',Icon);
Vue.component('Alert',Alert);

你这里贴的代码没有把message注册为全局组件？

---

---

babel-plugin-import插件装了没？配置了没？
按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：
npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}
然后这样按需引入组件，就可以减小体积了：
import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

Answer 2

我今天也碰到这个，已经知道怎么回事了，像通过$Message这种调用的组件，不能用component注册，需要把属性绑到Vue实例上，即在main.js里面 import以后，Vue.prototype.$Message = Message 这样注册

Answer 3

import {Message} from 'iview'
Vue.prototype.$Message = Message

在main.js引入

Answer 4

直接用

Message.success("OK")