iview按需引入Message全局提示組件，報錯，怎么解決？

按需引入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);

看了官網(wǎng)的教程iview Message全局提示組件

通過直接調(diào)用以下方法來使用組件：

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)

請教各路大佬..謝謝

回答

編輯回答

薔薇花

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可以實現(xiàn)按需加載組件，減少文件體積。首先安裝，并在文件 .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);

2018年5月10日 06:22

編輯回答