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
- 若参数是Object对象,则该对象必须提供一个 install 方法,install方法的参数就是Vue。该方法会被自动执行。
- 若参数是Function函数,则该函数被当作是 install 方法,install方法调用时,会将Vue作为参数传入。
注意事项
- 该方法需要在调用 new Vue() 之前被调用。
- 有些组件调用时不需要使用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')
效果图
人生如逆旅
我亦是行人
分类:
Vue / vue2
标签:
Vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~