浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
使用vue的过程中,可能会把某个组件封装起来,供其他页面有相同的需求时可以直接导入使用,不需要再重写一遍,提高效率,避免代码冗余
平时我们会如何使用ui组件库的呢?
以ElementUI为例:
1.安装
npm i element-ui -S
2.导入,app.use()注册
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
那 Vue.use(xxx),背后到底为我们做了些什么工作呢?
回忆一下组件的封装过程:
这里以封装button组件为例
1.在components下新建一个button.vue文件
<template> <div> 我是button </div> </template> <script> export default { name:"xx-button" } </script> <style> </style>
2.main.js中导入并注册组件
import Vue from 'vue'
import App from './App.vue'
import Button from './components/button.vue'
Vue.component(Button.name,Button)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
这样就可以在全局中使用组件了
<template> <div> <xx-button> </xx-button> </div> </template>
app.use()实现
同理想要使用ElementUI的组件,我们也需要注册,而调用app.use(xxx)方法的时候,也是内部调用install方法注册组件的时候
例子如下:
可以新建一个install.js文件,写入如下代码
// 统一导出 // 导入颜色选择器组件 //假设这些都是ElementUI封装好的组件 import Button from './button' import Dialog from './dialog' import Input from './input' import Checkbox from './checkbox' import Radio from './radio' import RadioGroup from './radio-group' import Switch from './switch' import CheckboxGroup from './checkbox-group' import Form from './form' import FormItem from './form-item' import './fonts/font.scss' // 存储组件列表 const components = [ Button, Dialog, Input, Checkbox, Radio, RadioGroup, Switch, CheckboxGroup, Form, FormItem ] // 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 const install = function (Vue) { // 遍历注册全局组件 components.forEach(component => { Vue.component(component.name, component) }) } // 判断是否是直接引入文件,如果是,就不用调用 Vue.use() if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } // 导出的对象必须具有 install,才能被 Vue.use() 方法安装 export default { install }
在main.js中进行导入
调用use,会调用install.js中的install方法,逐个遍历组件进行全局注册
import Vue from 'vue' import App from './App.vue' import TestUI from '../packages' //调用use,会调用install.js中的install方法,逐个遍历组件进行全局注册 Vue.use(TestUI) Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app')
这样也就完成了对插件导入后,使用app.use()方法进行安装的封装了
转 : https://blog.csdn.net/fesfsefgs/article/details/105842489
https://www.cnblogs.com/ttjm/p/10394615.html