uniapp全局组件全局使用(不在每个页面template使用，仅支持H5)，函数式调用全局组件方法(uniapp全局对象)

发布时间：2023-12-20

uniapp全局组件全局使用(不在每个页面template使用，仅支持H5)，函数式调用全局组件方法

推荐整理分享uniapp全局组件全局使用(不在每个页面template使用，仅支持H5)，函数式调用全局组件方法(uniapp全局对象)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp全选,uni-app全局组件,uniapp全选,uniapp全选,uniappui组件,uniappui组件,uniapp全局变量四种实现方式,uniapp 全局组件,内容如对您有帮助，希望把文章链接给更多的朋友！

最简单的使用，在 main.js 编写如下代码，即可将 xxx 组件在每个页面显示

// main.js// 引入组件import xxx from "@/components/xxx.vue";// 将该组件挂载在document.body下document.body.appendChild(new xxx().$mount().$el);函数式调用全局组件方法

场景，某些 toast 组件需要如下方式使用

<template> <toast ref="toast"></toast></template><script> export default { methods:{ showToast(){ this.$refs.toast.show(); } } }</script>

经改造，最终使用方法为：

this.$r.toast().show();

实现方式：

1、在 utils 目录下新建 render.js

2、在 main.js 下将 render.js 绑定在 this 下

// ...import render from "@/utils/render";Vue.prototype.$r = render;// ...

3、在 render.js 内将组件绑定至全局

// utils/render.js// 引入vueimport vm from "vue";// toast组件import toast from "@/components/xxx/toast.vue";export default { /** * 全局toast弹窗 */ toast(){ // 全局注册toast组件 const toastCom = vm.component('toast',toast); // 获取uniapp根节点 const uniappRoot = document.getElementsByTagName("uni-app")[0]; // 初始化toast组件const toastComp = new toastCom(); // 这里我每个组件内都有一个固定id，用来禁止同意组件生成多次if(document.getElementById(toastComp.id)){document.getElementById(toastComp.id).remove();} // 将toast组件添加在uniapp根节点上uniappRoot.appendChild(toastComp.$mount().$el);return toastComp; }} uniapp全局组件全局使用(不在每个页面template使用，仅支持H5)，函数式调用全局组件方法(uniapp全局对象)