在iview的官方文档中的快速上手部分,写了如何按需引入单个组件。像Button、Form这些常用组件就很方便也正常引入并使用。但是我们需要使用Message和Notice时,按文档的使用方式
this.$Message.error('This is an error tip');
这样,一切看上去正常,一运行。就报错,can't not read property 'error' of undefined。
根据错误的字面意思,就是$Message对象是未定义的,this下并没有$Message这个属性对象。原因是Message只是一个函数库,在iview的源码里可以看见Message只是一个js文件,并没有vue文件,因此不是vue组件。想使用Message在main.js文件中引入Message挂载到vue的原型链即可使用。
//main.js import {Message} from 'view design'; Vue.prototype.$Message = Message; ... <script> export default{ ... this.$Message.error('This is an error tip'); ... } </script>
同理,Notice也是类似方式使用。