Vue 相关Api

Vue.prototype.xx

作用:挂载全局方法
使用场景一:将自定义函数或方法进行全局挂载,方便全局使用。
xx.js(公共方法或者api请求方法)

export function getData(param1) {

}

main.js

import { getData } from "@/xx/xx";
Vue.prototype.getData = getData;

xx.vue

this.getData(param1)

使用场景二:结合Vue.Use安装自定义插件并将插件中的方法挂载全局
plugins→modal.js

import { Message} from 'element-ui'

export default {
  // 消息提示
  msg(content) {
    Message.info(content)
  },
  // 错误消息
  msgError(content) {
    Message.error(content)
  },
  // 成功消息
  msgSuccess(content) {
    Message.success(content)
  },
  // 警告消息
  msgWarning(content) {
    Message.warning(content)
  }
}

plugins→index.js

import modal from './modal'

export default {
  install(Vue) {
    Vue.prototype.$modal = modal
  }
}

main.js

import plugins from './plugins' 
Vue.use(plugins)

xx.vue

this.$modal.msgSuccess("新增成功");

Vue.Use()

作用:安装插件、注册全局组件。
原理:调用插件对象或者函数的install方法,并将Vue作为参数传入。只需要调用一次vue.use,便可在所有组件中直接使用插件提供的功能。
参数:

  • {Object | Function} plugin
  1. 若参数是Object对象,则该对象必须提供一个 install 方法,install方法的参数就是Vue。该方法会被自动执行。
  2. 若参数是Function函数,则该函数被当作是 install 方法,install方法调用时,会将Vue作为参数传入。

注意事项

  1. 该方法需要在调用 new Vue() 之前被调用。
  2. 有些组件调用时不需要使用Vue.Use,例如axios,是因为该组件内部没有 install 方法。

代码示例
plugins→index.js

const Plugin1 = {
  install(Vue, param) {
    console.log("方法第一个参数:", Vue);
    console.log("方法第二个参数:", param);
  },
};

function Plugin2(Vue, param) {
  console.log("函数第一个参数:", Vue);
  console.log("函数第二个参数:", param);
}

export { Plugin1, Plugin2 };

main.js

import {Plugin1,Plugin2} from './plugins/index'
Vue.use(Plugin1,'a')
Vue.use(Plugin2,'b')

效果图
image.png

posted @   相遇就是有缘  阅读(15)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
  1. 1 我记得 赵雷
  2. 2 北京东路的日子 汪源
  3. 3 把回忆拼好给你 王贰浪
北京东路的日子 - 汪源
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available

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