Vue.use() 注册插件(个人条记)

源码 2024-9-15 04:47:05 50 0 来自 中国
Vue.use是什么?

官方对 Vue.use() 方法的分析:通过全局方法 Vue.use() 使用插件,Vue.use 会自动克制多次注册雷同插件,它须要在你调用 new Vue() 启动应用之前完成,Vue.use() 方法至少传入一个参数,该参数范例必须是 Object 或 Function,如果是 Object 那么这个 Object 须要界说一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 实行时 install 会默认实行,当 install 实行时第一个参数就是 Vue,其他参数是 Vue.use() 实行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。
Vue.use() 的源码中的逻辑

export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) {  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))  if (installedPlugins.indexOf(plugin) > -1) {   return this  }  const args = toArray(arguments, 1)  args.unshift(this)  if (typeof plugin.install === 'function') {   plugin.install.apply(plugin, args)  } else if (typeof plugin === 'function') {   plugin.apply(null, args)  }  installedPlugins.push(plugin)  return this }}在源码中起首限定了它传入的值的范例只能是Function或者Object,然后判断了该插件是不是已经注册过,防止重复注册,然后调用了该插件的install方法,源码中也有先容到Vue.use()可以担当多个参数的,除第一个参数之后的参数我们都是以参数的情势传入到当前组件中。
插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严酷的限定。
一样平常有下面几种:

  • 添加全局方法或者 property。如:vue-custom-element
  • 添加全局资源:指令/过滤器/过渡等。如 vue-touch
  • 通过全局混入来添加一些组件选项。如 vue-router
  • 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 一个库,提供本身的 API,同时提供上面提到的一个或多个功能。如 vue-router
使用插件

通过全局方法 Vue.use() 使用插件。它须要在你调用 new Vue() 启动应用之前完成:
Vue.use(MyPlugin) // 会调用 `MyPlugin.install(Vue)`new Vue({  // ...组件选项})也可以传入一个可选的选项对象:
Vue.use(MyPlugin, { someOption: true })Vue.use 会自动克制多次注册雷同插件,届时纵然多次调用也只会注册一次该插件。
开辟插件

Vue.js 的插件应该袒露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) {  // 1. 添加全局方法或 property  Vue.myGlobalMethod = function () {    // 逻辑...  }  // 2. 添加全局资源  Vue.directive('my-directive', {    bind (el, binding, vnode, oldVnode) {      // 逻辑...    }    ...  })  // 3. 注入组件选项  Vue.mixin({    created: function () {      // 逻辑...    }    ...  })  // 4. 添加实例方法  Vue.prototype.$myMethod = function (methodOptions) {    // 逻辑...  }}
参考文章:https://www.jianshu.com/p/0b8b6f2e5a82
https://cn.vuejs.org/v2/guide/plugins.html
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 18:26, Processed in 0.167553 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表