美文网首页vue
Vue.use解析

Vue.use解析

作者: solfKwolf | 来源:发表于2020-03-15 21:40 被阅读0次

Vue.use

  • 参数:
    {Object | Function} plugin
  • 用法
    安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
    该方法需要在调用 new Vue() 之前被调用。
    当 install 方法被同一个插件多次调用,插件将只会被安装一次。

源码解析

  • 入口文件 src/global-api/index
import { initUse } from './use'
// 注入use方法
initUse(Vue)
  • initUse 方法
import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
   // 绑定use方法
  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') {
      // 调用install方法,并绑定this
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 添加插件到列表
    installedPlugins.push(plugin)
     //   返回Vue实例
    return this
  }
}

上面的代码可以看出,Vue.Use方法会调用插件对象的install方法(或者插件函数)。并将this传递给install函数作为第一个参数。

相关文章

  • Vue.use解析

    Vue.use 参数:{Object | Function} plugin 用法安装 Vue.js 插件。如果插件...

  • Vue.use源码解析

    什么是Vue插件 关于什么是Vue插件大家可以去看官网的解释 ,总得来说就是提供一个全局注册/调用的能力。 怎么用...

  • Vue.use源码

    官方对 Vue.use() 方法的说明: 通过全局方法 Vue.use() 使用插件;Vue.use 会自动阻止多...

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

    Vue.use是什么? 官方对 Vue.use() 方法的说明:通过全局方法 Vue.use() 使用插件,Vue...

  • Vue.use, Vue.component,router-vi

    ? Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue...

  • Vue.use源码数据流

    Vue.use(ElementUI)实现 step1:查看Vue.use 函数,其中我们看到 step2:查看pl...

  • 为什么axios不是使用的vue.use()

    问题 相信很多人在用Vue使用别人的组件时,会用到Vue.use()。例如:Vue.use(VueRouter)、...

  • 关于Vue.use()详细说明

    问题 相信很多人在用Vue使用别人的组件时,会用到Vue.use()。例如:Vue.use(VueRouter)、...

  • 关于Vue.use()详解

    问题相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)...

  • VUE.use详解

    问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter...

网友评论

    本文标题:Vue.use解析

    本文链接:https://www.haomeiwen.com/subject/qhobehtx.html