Vue全局注册组件

一、Vue.component 和 Vue.use的区别

Vue.component 和 Vue.use 都是 Vue 提供的全局 API，但它们的作用对象、底层逻辑和使用场景完全不同。简单一句话总结：

• Vue.component：是“造零件”。专门用来全局注册单个组件（比如全局的按钮、弹窗）。

• Vue.use：是“装插件”。用来安装第三方插件或包含多个功能/组件的集合（比如 Vue Router、Vuex、Element UI）。

二、Vue.component (全局注册组件)

2.1 用途

注册一个全局组件。注册后，在任何组件的模板里都可以直接使用 <你的组件名>，不需要再局部 import 和声明。

2.2 底层逻辑

Vue 内部会维护一个全局组件映射表（components 对象）。当你调用它时，相当于告诉 Vue：“以后看到这个标签名，就用这个组件去渲染它。”

2.3 语法

// Vue 2 语法
Vue.component('MyButton', {
  template: '<button>点我</button>'
})

// Vue 3 语法 (在 app 实例上调用)
app.component('MyButton', { ... })

2.4 使用

直接写标签 <MyButton />

三、Vue.use (安装插件)

3.1 用途

安装 Vue.js 插件。插件通常是一个对象或函数，用来给 Vue 全局添加功能。比如添加全局方法、全局指令、全局混入，或者批量注册一堆组件。

3.2 底层逻辑

当你调用 Vue.use(plugin) 时，Vue 会去找这个 plugin 里有没有定义 install 方法。

• 如果有，Vue 就会执行 plugin.install(Vue, options)。
• 如果没有 install 方法，但本身是个函数，Vue 就会把它当作 install 函数直接执行。
• 它还会防止同一个插件被重复注册。

3.3 语法

// Vue 2 语法
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// Vue 3 语法
app.use(ElementUI);

3.4 使用

安装后，插件暴露出的组件（如 <el-button>）、指令（如 v-loading）、原型方法（如 this.$message）就可以直接用了。

四、二者关系及疑问

Vue.use 内部经常调用 Vue.component

这是很多初学者没想通的地方。为什么组件库（如 Element UI、Ant Design）通常让我们用 Vue.use()，而不是一个一个去 Vue.component() 注册？

因为像 Element UI 这种库，包含了几十个组件。如果让你手动注册：

Vue.component(Button.name, Button);
Vue.component(Input.name, Input);
Vue.component(Table.name, Table);
// ... 注册几十次，太累了

组件库的作者为了让你省事，会编写一个 install 方法，在内部循环调用 Vue.component：

// 模拟 Element UI 的内部实现
import Button from './button'
import Input from './input'

const components = [Button, Input] // 把库里的所有组件收集起来

const Element = {
  install(Vue) {
    // 你看，插件内部其实就是批量调用了 Vue.component
    components.forEach(component => {
      Vue.component(component.name, component)
    })
    
    // 还可以顺便挂载全局方法或指令
    Vue.prototype.$message = Message
  }
}

export default Element

对比总结表

口诀：
小单件全局用，找 component；
大框架和库，找 use。