Vue学习(二十)插件全攻略
2023-09-27 14:26:39 时间
Vue.use()
-
方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。
-
如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件。
-
插件的install方法将接收两个参数,第一个是参数是Vue,第二个参数是配置项options。
-
在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
// 5. 添加组件
Vue.component()
}
解析element-ui组件库是如何注册的
1、main.js文件中引入element-ui
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2、调用ElementUI对象下的install方法
index.js文件中导入了所有的组件,存放在components变量中,然后再install中循环全局注册组件
3、单独全局注册某一个组件
在main.vue中定义了aside组件
在aside/index.js文件中导入组件并定义install方法
然后再main.js中单独注册
import { Aside } from 'element-ui'
Vue.use(Aside)// 就会调用Aside组件对象中的install进行全局注册
// 页面中就可以直接使用该组件
<aside></aside>
使用插件注册自定义组件(全局)
组件index.vue
在index.js中引入组件,并定义install方法
main.js中注册
注意:和示例的区别在于导出的是install方法,目前看两种都可以
使用插件注册自定义指令(全局)
参考
相关文章
- Methods, Computed, and Watchers in Vue.js
- 用Tornado实现web聊天室(前端采用vue+bootstrap)
- 【Vue】路由组件中失去焦点和获得焦点的两个事件
- 【Vue】监视(侦测)属性Watch用法的完整示例代码
- vue基础篇---class样式绑定
- 2022最新前端vue面试题
- 【vue系列-07】vue脚手架的基本使用
- (14)打鸡儿教你Vue.js
- vue.js学习记录
- 从头开始学习vue-router
- vue.config.js
- vue 解析二维码
- Vue之methods watch和compute的区别和联系
- 认识单文件组件.vue 文件
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记二:HBuilder X框架搭建
- 【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页
- 使用layer.open打开一个框架页面执行成功回调时,怎么向父页面的Vue传值且能动态绑定数据?
- VUE的mixin混入解析
- SpringBoot+Vue实现的在线聊天系统 附带详细运行指导视频
- SpringBoot+Vue前后端分离项目 打包部署CentOS7 适合初学者部署学习
- vue学习:使用tab标签页时,刷新页面停留在当前tab
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Django+Vue项目学习第七篇:利用nginx解决跨域问题
- Django+Vue项目学习第四篇:使用axios发送携带参数的get请求
- Vue学习第26天——vuex中的模块化和命名空间的详解及案例练习
- Vue学习第24天——Vuex开发者工具的使用
- Vue.js 技术揭秘学习 (3) render
- Vue.js 技术揭秘学习 (1) new Vue 发生了什么