posts - 22,comments - 9,views - 5266

在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,有的组件引入进来又进行了Vue.prototype.$something = something,那么它们之间有什么联系呢?

Vue.prototype.$something是在原型上增加了一个方法,比如Vue.prototype.$axios,
通过我们会在全局注册这个方法,然后在周后的文件中都可以通过$axios直接来使用axios.

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()什么时候使用?
它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use(),例如在Vue中引用Element如下:

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

因为在Element源码中会暴露除install方法,所以才需要用Vue.use()引入。
我们也可以在自己的vue项目中自己定义一个install方法,然后通过Vue.use()方法来引入测试一下:

const plugin = {
  install() {
    alert("我是install内的代码")
  },
}
import Vue from "vue"
Vue.use(plugin) // 页面显示"我是install内的代码"

当我们打开页面就会弹出“我是install内的代码”提示。

posted on   秃头大宝贝  阅读(655)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示