京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

Vue.use()和Vue.prototype使用详解

2024-11-2 22:33| 发布者: ae2942d9| 查看: 81| 评论: 0

摘要: 目录Vue.use()作用Vue的使用场景1.ElementUI、VueRouter等官方插件的使用2.自定义插件,并提供install方法Vue.prototype作用Vue.use()和Vue.prototype的区别总结Vue.use()作用 官方文档中提到,Vue.use()可以用来注
目录

Vue.use()作用

官方文档中提到,Vue.use()可以用来注册全局的插件。使用Vue.use()后可以使得插件能够在项目的任意位置上使用。

那么什么时间使用Vue.use()呢?

着实官方文档中也给出了很详细的答案,就是当一个插件对象或者函数,拥有install方法时,就使用Vue.use()。

调用Vue.use()时会调用插件的install方法,使得其能够全局使用。

Vue的使用场景

1.ElementUI、VueRouter等官方插件的使用

在vue官方社区中提供了一系列辅助开发的插件,此中就有许多插件具有install方法,比如ElementUI和VueRouter,我们使用Vue.use()进行引入。

[code]import Vue from 'vue' import VueRouter from 'vue-router'; import Element from 'element-ui' Vue.use(VueRouter); Vue.use(Element);[/code]

2.自定义插件,并提供install方法

除了使用官方的插件,我们也可以自定义一些含有install方法的插件

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

在main.js中进行注册插件

[code]import Icon from './global' Vue.use(Icon)[/code]

Vue.prototype作用

vue.prototype是一种注册全局变量的方式,使用vue.prototype的变量可以全局访问。最典范的例子就是axios。

[code]import axios from 'axios'; Vue.prototype.$http = axios;[/code]

注册了axios之后就能在项目的位置使用了,使用的方法:

调用this.$http进行访问。

现实上我们还要注意,使用Vue.prototype注册的全局变量前面都要加上$符号,这是一种规范,紧张是为了防止定名冲突。

Vue.use()和Vue.prototype的区别

讲到这里,我们细致看看这两个方法的区别。

着实很显而易见,Vue.use()用于注册具有install方法的变量,注册后install函数会自动调用,使得install的详细变量能够全局使用,包罗全局变量,全局标签等等。

而Vue.prototype就是一个注册全局变量的方法,注册的全局的变量以$开头,调用this方法调用。

总结

以上为个人经验,盼望能给各人一个参考,也盼望各人多多支持脚本之家。


来源:https://www.jb51.net/javascript/328554usq.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
关闭

站长推荐上一条 /6 下一条

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-7-2 08:12 , Processed in 0.048787 second(s), 19 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部