elementUI Message 独立引入的用法

今天在做项目时候，用到了 elementUI 的 Message 组件。因为我是按需 import 引入的方法，结果按照原本的文档API代码不生效。

查看文档之后有俩种引入方法：

全局引入

import ElementUI from ‘element-ui’;

Vue.use(ElementUI);

按需引入

import { Button, Select } from ‘element-ui’;

Vue.use(Button)

Vue.use(Select)

简答来说，如果是全局引入的话，就可以直接使用this.$message，但是按需引入的话能不能像全局引入一样用 this.$message 呢？

问题原因及解决：

查看下 element-ui/package/message/index.js 的实现方法，结果发现：

import Message from './src/main.js';
export default Message;

直接返回了。

而其他的组件，一般都是有 install 方法供Vue来操作的。

知道问题所在就好解决了，给 Message 添加 install 方法就行了。

// 和其他组件一样，一并引入
import {Button, Message} from 'element-ui'

// 在调用 Vue.use 前，给 Message 添加 install 方法
Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

// 和所有组件一样，一并进行use
Vue.use(Button)
Vue.use(Message)

当然，也可以不用 Vue.use 来实现，比如直接写在 Vue 实例上：

// 和其他组件一样，一并引入
import {Button, Message} from 'element-ui'

Vue.use(Button)

// 将 Message 直接挂在 Vue 实例上
Vue.prototype.$message = Message