在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert、modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。
以bootstrap-vue中的Alert组件为例,分一下几步进行:
1、定义一个vue文件实现对原组件的再次封装
main.vue
1 | <template> |
1 | <style scoped> |
2、定义一个js文件挂载到Vue上,并和我们定义的组件进行交互
index.js
1 | import Alert from './main.vue' |
其主要思想是通过调用这个方法给组件传值,然后append到body下
3、最后需要在main.js中use一下
1 | import Alert from '@/components/alert/index' |
4、使用
1 | this.$alert({msg: '请输入手机号'}) |
5、confrim的封装也是一样的
1 | <template> |
1 | import Confirm from './main.vue' |
求知的欲望,是不断学习的动力。路漫漫其修远兮,吾将上下而求索。
欢迎加我QQ:2360263057一起讨论学习