Element: Message, Notification等组件只能单独引用，没法使用全局方法？

[laoxubuer]

引入以上组件，如果在入口文件main.js 里面使用Vue.use(Notification)，然后在实例上调用this.$notify就会报this.$notify is not a function 的错误，但是最新1.1.3的文档写了

然后又看到另外两个issue
https://github.com/ElemeFE/element/issues/1797
https://github.com/ElemeFE/element/issues/2024
说应该用到的地方直接用，按我理解应该就是直接调用Notification了，实际上也成功调用了，但是全局的既然文档说可以，但是一直没有成功，难道是写得不对？在源码里也没看到在Vue.prototype上面绑定方法

[Leopoldthecoder]

请贴一下你引入的代码。

[laoxubuer]

.babelrc
{ "presets": [ "es2015", "stage-2" ], "plugins": [ "transform-runtime", ["component", [ { "libraryName": "element-ui", "styleLibraryName": "~theme" } ]] ], "comments": false, "env": { "test": { "plugins": [ "istanbul" ] } } }
main.js

实例

错误信息

[Leopoldthecoder]

如果希望通过 this.$notify 调用，那么需要完整引入 Element：

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

这时会执行 这行代码，将 $notify 注册到实例上。

如果按你的写法（按需引入），由于没有执行上面那行代码，所以 $notify 是 undefined。其实可以在你的 main.js 里手动注册一下：

import { Notification } from 'element-ui'
Vue.prototype.$notify = Notification

另外，按需引入的话 Vue.use(Notification) 是无意义的。

[laoxubuer]

手动注册我也试过，但是会报错

[Leopoldthecoder]

看起来是 babel-plugin-component 的 bug，暂时先这样绕一下：

import { Notification } from 'element-ui'
const notify = Notification
Vue.prototype.$notify = notify

bug 我们再看看。

[laoxubuer]

好的，多谢，绕一下可以了

[QingWei-Li]

[email protected] 已修复该问题

[lyboy2012]

@QingWei-Li

是否可以在vue组件内单独引用 element-ui的某一个组件，

import { Button as ElButton } from 'element-ui';

export default {
    components: { ElButton },
    template: template
}

而不是在入口 用 全局引用

Vue.component(Button.name, Button)
or
 Vue.use(Button)

目前测试组件内引用webpack 提示： Module not found: Error: Can't resolve 'antd/lib/el-button' ，
没搞明白为什么引用el 怎么提示ant 去了

babelrc配置如下

{
    "presets": [
        ["env", { "modules": false }],
        "stage-0"
    ],
    "plugins": ["transform-runtime", [
        "component", [{
            "libraryName": "element-ui",
            "styleLibraryName": "theme-default"
        }]
    ]]
}

[GreedyPirate]

说下我的结局方案，在main.js中使用Message组件
import Message from 'element-ui'
Message.error('error msg');