Vue - 自定义插件
插件通常用来为 Vue 添加全局功能,例如数据字典插件等。
a)插件通常会为 Vue 添加全局功能,一般是添加全局方法/全局指令/过滤器等 b)Vue 插件有一个公开方法 install ,通过 install 方法给 Vue 添加全局功能 c)通过全局方法 Vue.use() 使用插件,它需要在你调用 new Vue() 启动应用之前完成
一、使用插件
通过全局方法 Vue.use()
使用插件。它需要在你调用 new Vue()
启动应用之前完成:
// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ // ...组件选项 })
也可以传入一个可选的选项对象:
Vue.use(MyPlugin, { someOption: true })
Vue.use
会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件,在像 CommonJS 这样的模块环境中,你应该始终显式地调用 Vue.use()。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。
二、开发插件
Vue.js 的插件应该暴露一个 install
方法。这个方法的第一个参数是 Vue
构造器,第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) { // 1. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 2. 注入组件选项 Vue.mixin({ created: function () { // 逻辑... } ... }) // 3. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... } }
注意:如果插件是一个对象,必须提供 install
方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
三、开发实例
实例:
//所谓vue的插件,就是一个js对象 let myplugin = {} myplugin.install = function(Vue,Options){ // 添加属性与方法 //这里我写的$testProp等加了$符号的,表示他为vue全局的,但实际上不加也可以的,访问时也不加就行了 Vue.prototype.$myoption='我是来自插件的属性', Vue.prototype.$myfn=function(){ console.log('我是来自插件的方法') } // 添加全局混入 Vue.mixin({ mounted() { console.log('组件创建成功') }, }) // 添加全局指令 Vue.directive('dir',{ inserted:function(ele){ ele.style.border='2px solid green' } }) } export default myplugin
main.js里面安装插件:
import myplugin from './plugin/myplugin' Vue.use(myplugin)
插件使用:
<template> <div> <h1 v-dir>123</h1> </div> </template> <script> export default { mounted() { console.log(this.$myoption) this.$myfn() }, } </script>
注意:插件与组件的区别:
组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue
。
插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。
参考:
https://cn.vuejs.org/v2/guide/plugins.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6
https://cn.vuejs.org/v2/api/#Vue-use
posted on 2022-01-19 16:57 TrustNature 阅读(576) 评论(0) 编辑 收藏 举报