美文网首页Vue.js 资料
Vue ElementUI 中报错:this.$message

Vue ElementUI 中报错:this.$message

作者: 李寻欢_ | 来源:发表于2019-11-09 17:58 被阅读0次

原因:
在单独按需引入element组件时,message组件需要挂载到Vue全局对象上,而不是用Vue.use(Message),这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的,还有confirm组件。

Vue子组件中:

methods: {
    myhandle() {
      this.$message.success('您已成功退出!');
    }
  }
}

element.js插件文件中(注意最后一行的代码):

import Vue from 'vue'
import { Button, 
  Form, 
  FormItem, 
  Input, 
  Card,
  Container,
  Header,
  Aside,
  Main,
  Message
} from 'element-ui'

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Card)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)


Vue.prototype.$message = Message

这样子,就完美解决了,附上elementUI官方文档中的说明:
https://element.eleme.io/#/zh-CN/component/message

ElementUI官方文档中的说明.png

相关文章

网友评论

    本文标题:Vue ElementUI 中报错:this.$message

    本文链接:https://www.haomeiwen.com/subject/rxpnbctx.html