vue.use() 的作用详解

最新推荐文章于 2025-04-08 20:19:55 发布

冰雪为融

最新推荐文章于 2025-04-08 20:19:55 发布

阅读量1.8w

点赞数 18

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/110667201

版权

vue 专栏收录该内容

81 篇文章

订阅专栏

本文详细介绍了Vue.js中Vue.use()方法的使用方式及其注意事项。包括如何利用Vue.use()安装插件，以及如何确保插件仅被安装一次。此外，还通过具体示例展示了如何创建并注册自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方解释：

Vue.use( plugin )

参数：
- {Object | Function} plugin
用法：

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

Vue.use()什么时候使用？
它在使用时实际是调用了该插件的install方法，所以引入的当前插件如果含有install方法我们就需要使用Vue.use()，例如在Vue中引用Element如下

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

使用示例：

编写组件通过vue.use()使用

在 src/icon/index.js中写入

import Icon from '../components/icon/index'
const IconConponents = {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install: function (Vue) {
    Vue.component('Icon', Icon)
  }
}
// 导出
export default IconConponents

main.js中引入：

import Icon from './global'

Vue.use(Icon)

然后就可以全局使用Icon组件了

 <Icon type="arrow-left" color="red" size="28"></Icon>

参考文章：

https://cn.vuejs.org/v2/api/?#Vue-use

https://blog.youkuaiyun.com/lxiang222/article/details/103376150