彻底弄懂 Vue.use() 方法

相信很多人在 Vue 中使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)Vue.use(MintUI)。但到了 axios,不需要 Vue.use(axios) 就能直接使用了,这是为什么呢?

接下来我们自定义一个需要 Vue.use() 的组件,也就是有 install 的组件。

创建项目

使用 vue init webpack-simple myProject(myProject 为新建的文件夹名称)创建一个项目,然后一路回车。

cd myProject 进入该目录,npm i 安装本次需要的模块。

npm run dev 运行该项目。

创建如下图中的文件夹和文件:

定义 Hello 组件

<template>
    <div>
        this is Hello...
    </div>
</template>

定义 World 组件

<template>
    <div>
        this is World...
    </div>
</template>

在 index.js 中引入 两组件 ,并导出:

// 引入组件
import Hello from './Hello.vue'
import World from './World.vue'

// 定义 Loading 对象
const installObj = {
  // install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
  install: function (Vue) {
    Vue.component('sayHello', Hello),
    Vue.component('sayWorld', World)
  }
}

// 导出
export default installObj

在 main.js 中引入 installExample 目录下的 index.js

import Vue from 'vue'
import App from './App.vue'
// 这里用什么名字,并不重要
import installObj from './components/installExample/index'

// 只要这里引用对就行
Vue.use(installObj)

new Vue({
  el: '#app',
  render: h => h(App)
})

在 App.vue 里面写入定义好的两个组件标签 <sayHello></sayHello><sayWorld></sayWorld>

<template>
  <div id="app">
    <h1>vue install example</h1>
    <sayHello></sayHello>
    <sayWorld></sayWorld>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  }
}
</script>

<style>
</style>

结果如下

文末总结

  1. 就算没用独立引用 sayHellosayWorld 这两个组件,它俩依然可以被全局使用。 Vue.use()的作用就是让它里面被注册的组件能够被全局使用。

  2. axios为什么不需要用 Vue.use(axios)就能直接使用?

  • axios 内部并没有提供相应的组件供用户全局使用,开发者在封装 axios 时,根本就没有配置 install
  • 就算 axios 内部提供了全局组件,只要不使用这些组件,就算不使用 Vue.use(axios)进行注册,也不会报错。
  1. 提供 install 方法,只是为了让 Vue 可以将组件注册到框架里去,使其能够被全局使用。