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);
};
posted @ 2023-03-05 21:27  宇宙野牛  阅读(1177)  评论(0编辑  收藏  举报