不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

elementUI Message 独立引入的用法

web 建伟 898℃ 0评论

今天在做项目时候,用到了 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

转载请注明:Li Jianwei's Blog » elementUI Message 独立引入的用法

喜欢 (0)or分享 (0)
web技术交流群
22765697