您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

Vue.use和Vue.prototype的区别

来源:网络整理 浏览:222次 时间:2022-11-30

今天打开Vue项目中main.js文件中,发现引入文件使用了两种方式。

import Vue from 'vue'import App from './App.vue'import router from './router'// 引入echartsimport echarts from 'echarts'import 'echarts/map/js/china.js';Vue.prototype.$echarts = echarts// 将自动注册所有组件为全局组件import dataV from '@jiaminghi/data-view'Vue.use(dataV)

Vue.use和Vue.prototype这两种方式引入包。那这两种方式有什么区别,既然困惑,那就本着刨根问底的心态,去了解下这两种方式的不同。

1 Vue.use( plugin )

我们先看下官方的解释,

参数:{Object | Function} plugin

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

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

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

还是看代码比较直接,新建plugin文件夹,文件夹下新建plugin.js

var install = function(Vue) {    Object.defineProperties(Vue.prototype, {        $Plugin: {            value: function() { console.log('I am a plugin') }        }    })}module.exports = install

main.js导入

// 测试插件import Plugin from "./plugin/plugin"Vue.use(Plugin)

使用插件

this.$Plugin()

2 Vue.prototype
这种就比较好理解了,比如我们有个方法,

export const Plugin1 = (parameter1) => {    console.log(parameter1)}

全局都要使用,全局导入。

import { Plugin1 } from "./plugin/plugin"Vue.prototype.Plugin1 = Plugin1

需要的地方调用

this.Plugin1("111")

这么一对比,区别就很明显了,什么情况下使用Vue.use,什么情况下使用Vue.prototype。

  • 针对Vue编写的插件用Vue.use导入

  • 不是针对Vue编写的插件用Vue.prototype导入

编写插件可以参考官方文档:

https://cn.vuejs.org/v2/guide/plugins.html#ad

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com