位置: IT常识 - 正文

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

编辑:rootadmin
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全局对象)

4、最后我们可以直接函数式调用组件方法与设置组件属性

// 此show方法在toast组件的methods中定义this.$r.toast().show();// 此duration属性在toast组件的data中this.$r.toast().duration;

嘿,愿你代码永无bug,人生永无坎坷!

嘿,愿你代码永无bug,人生永无坎坷!

嘿,愿你代码永无bug,人生永无坎坷!

嘿,愿你代码永无bug,人生永无坎坷!

嘿,愿你代码永无bug,人生永无坎坷!

嘿,愿你代码永无bug,人生永无坎坷!

广告:(提供学习机会)

       前端交流学习群:1063233592

       PHP学习交流群:901759097

       前后端学习交流微信群:加我微信,填写验证消息(前端),拉你进群

本文链接地址:https://www.jiuchutong.com/zhishi/276371.html 转载请保留说明!

上一篇:初级会计中应收票据质押给银行怎么做账?(初级会计应收账款例题)

下一篇:Win10 Dev 预览版 20279(FE_RELEASE)更新详解(win10 dev版本)

  • 小天才z7可以刷公交卡吗(小天才z7可以刷公交吗)

    小天才z7可以刷公交卡吗(小天才z7可以刷公交吗)

  • 微博铁粉标识如何获得(微博铁粉标识是什么样)

    微博铁粉标识如何获得(微博铁粉标识是什么样)

  • 苹果xs后壳是玻璃材质吗(苹果xs的后壳是什么材质的)

    苹果xs后壳是玻璃材质吗(苹果xs的后壳是什么材质的)

  • 4s最适合的系统版本

    4s最适合的系统版本

  • 手机内屏碎了怎么补救(手机内屏碎了怎么把数据导出来)

    手机内屏碎了怎么补救(手机内屏碎了怎么把数据导出来)

  • 打印机一打印就出现文件另存为(打印机一打印就资源管理器停止工作)

    打印机一打印就出现文件另存为(打印机一打印就资源管理器停止工作)

  • 苹果11pro怎么录屏(苹果11pro max怎么录屏)

    苹果11pro怎么录屏(苹果11pro max怎么录屏)

  • 苹果11用一会就发热(苹果11用一会就烫手)

    苹果11用一会就发热(苹果11用一会就烫手)

  • 钢化膜碎了怎么看屏幕有没有碎(钢化膜碎了怎么撕下来)

    钢化膜碎了怎么看屏幕有没有碎(钢化膜碎了怎么撕下来)

  • 视频帧速率什么意思(视频的帧速率)

    视频帧速率什么意思(视频的帧速率)

  • 优酷热度1相当于播放几次(优酷热度9800算高吗)

    优酷热度1相当于播放几次(优酷热度9800算高吗)

  • 快手的好友动态没有了(快手的好友动态怎么关闭)

    快手的好友动态没有了(快手的好友动态怎么关闭)

  • wps如何做ppt课件(怎么做课件ppt)

    wps如何做ppt课件(怎么做课件ppt)

  • 手机突然声音变小了怎么回事(手机突然声音变沙哑了又小了是什么回事)

    手机突然声音变小了怎么回事(手机突然声音变沙哑了又小了是什么回事)

  • word基本简历模版在哪(word制作教程)

    word基本简历模版在哪(word制作教程)

  • static的作用(java中static的作用)

    static的作用(java中static的作用)

  • 苹果7可以用airpods吗(苹果7可以用airpods二代吗)

    苹果7可以用airpods吗(苹果7可以用airpods二代吗)

  • 光猫可以自己更换吗(光猫可以自己换新的吗?)

    光猫可以自己更换吗(光猫可以自己换新的吗?)

  • 小米8便签有画画功能么(小米便签如何手绘图案)

    小米8便签有画画功能么(小米便签如何手绘图案)

  • 苹果8不能插耳机吗(苹果不能插耳机吗xr)

    苹果8不能插耳机吗(苹果不能插耳机吗xr)

  • 电脑点不亮原因及处理方法(电脑点不亮什么毛病)

    电脑点不亮原因及处理方法(电脑点不亮什么毛病)

  • 微信的钱包锁在哪里(微信的钱包锁在哪里打开)

    微信的钱包锁在哪里(微信的钱包锁在哪里打开)

  • 旺阿雷自然保护区里的旺阿雷瀑布,新西兰北岛 (© Nathan Kavumbura/Getty Images)

    旺阿雷自然保护区里的旺阿雷瀑布,新西兰北岛 (© Nathan Kavumbura/Getty Images)

  • 【历史上的今天】4 月 7 日:IBM System/360 问世;以太网的发明者诞生;第一个 RFC 文档发布

    【历史上的今天】4 月 7 日:IBM System/360 问世;以太网的发明者诞生;第一个 RFC 文档发布

  • js数组中find方法的介绍(js在数组中查找指定元素)

    js数组中find方法的介绍(js在数组中查找指定元素)

  • 应付职工薪酬应发数
  • 一般纳税人购入固定资产的账务处理
  • 金税盘税务申报
  • 管理部门社保入哪个科目
  • 业务招待产生的快递费
  • 技术转让成本包括什么
  • 以房屋抵顶的工程叫什么
  • 应计利息会计分录处理
  • 无形资产摊销以前年度摊多了
  • 网上银行 电子回单
  • 税目与应纳税额的关系
  • 非货币性资产对外投资
  • 车辆一次性入费用会计分录
  • 公司如何持续发展
  • 新成立的公司如何建账
  • 纯出口企业要交税吗
  • 一般纳税人的增值税应纳税额等于
  • 新成立的公司季报
  • 通讯费税前扣除标准
  • 外购货物用于职工福利企业所得税怎么调整
  • 产品预付款合同如何填写
  • windows7远程桌面连接在哪里
  • 生产税有哪些
  • 银行承兑汇票的转让一般通过什么渠道
  • 会计结算要求
  • 教你如何正确选择轮胎
  • 如何免费获取win11
  • php unit
  • 其他综合收益包括留存收益吗
  • 我告诉你win7旗舰版
  • 月底库存现金不足怎么办
  • yii2权威指南
  • php如何实现
  • thinkphp5框架介绍
  • 现代信号处理张贤达
  • html导航栏边框
  • 扩散模型和gan的区别
  • 帝国cms怎么安装不了
  • 企业转让时应收账款如何处理
  • java如何导出
  • sql 行列转换
  • 固定资产是不是非货币性资产
  • 固定资产处置增值税政策
  • 外经证是啥样
  • 代缴纳房产税
  • 全年一次性奖金税率表2023最新
  • 暂估入库按含税价吗
  • 一般纳税人是指哪些人群
  • 向税务局缴纳工会经费的没计提
  • 疫情防控免税政策
  • 调整以前年度利息支出
  • 不动产产权的取得
  • 叉车累计折旧如何结转
  • 预付购买设备款
  • 公司注册资金可以变更减少吗
  • 出纳建账账户名称怎么写
  • Sqlserver聚集索引和非聚集索引的区别
  • sql怎么分组查询
  • mysql57安装过程怎样选安装目录
  • win8装机软件
  • Windows Server 2008故障转移群集简介
  • mac桌面日历 记事本
  • itunes无法更新app
  • linux常用帮助命令
  • windows 10 mobile apk
  • win1020h2版本怎么更新
  • Windowsxp桌面没有图标怎么办
  • mac安装win10系统后怎么关掉f1快捷键
  • windows8连接wifi
  • win8.1无线
  • windows10电量图标消失了怎么还原
  • cocos2dx用什么ide
  • css弹出层
  • macos安装过程
  • Linux 中的各项 CPU 利用率是这样算出来的
  • js与jquery的关系
  • jquery点击事件写法
  • javascript含义
  • 税局可以办理哪些业务
  • 国税局黑龙江省
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设