Vue3 注册及使用全局方法
新建map-func.js,在main.js中全局定义$mapFunc。
map-func.js
function getLayer(layerId) {
return window.map.getLayer(layerId);
}
export default {
getLayer
};
main.js
import mapFunc from "./utils/map-func.js";
const app = createApp(App);
app.mount("#app");
app.config.globalProperties.$mapFunc = mapFunc;
export default app; // 把vue app导出,这样在单独的js文件中才可以使用mapFunc
在vue文件中使用:
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const demoMethod = () => {
proxy.$mapFunc.getLayer(id);
};
</script>
在js文件中使用:
(全局注册方法后,再在js中单独引入单个方法是无效的,会报错)
// import { getLayer } from "@/utils/map-func.js"; // 全局注册mapFunc后,这样在js中引入是无效的,会报错
import context from "../main.js"; // 需要在前面main.js中导出app
const $mapFunc = context.config.globalProperties.$mapFunc;
const demoMethod = () => {
$mapFunc.getLayer(id);
};
分类:
前端开发 / Vue
, 前端开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!