vue 把组件方法暴露到window对象中
方法 1(简单,但不推荐)
mounted() {// 2. 在mounted阶段声明globalFn,来调用组件内的方法window.globalFn = () => {this.getDetail()}
},
methods: {// 1. 组件内有一个getDetail方法,需要暴露给window,以供嵌入该页面的客户端调用getDetail() {// 业务逻辑}
}
优点:
- 简单: 适合暴露的方法不太多的系统
缺点:
变量名易冲突: 如果需要暴露的方法越来越多,那么 window 对象中的全局变量也会越来越多,容易变量名冲突
位置分散: 随着业务的复杂化,暴露的方法可能分散在各个.vue 文件中,不容易管理
方法 2(推荐,解决方法 1 的痛点)
- 在
main.js
中把Vue
对象暴露给window
// ...
const vm = new Vue({router,store,render: (h) => h(App)
}).$mount('#app')
window.vm = vm // 只把vm暴露给window,以后都在vm中做文章
// ...
- 在一个你喜欢的目录下新建 js 文件,该文件用来存放需要暴露出去的方法
(我是把这个文件放在了 @/utils/export2vmFunction.js 下)
exports.install = function (Vue) {// 把需要暴露出去的方法挂载到Vue原型上,避免了全局变量过多的问题// 全局方法都在这里,方便管理Vue.prototype.globalFn1 = function () {const component = findComponentDownward(this, 'RecommendRecord1')component.getDetail1()}Vue.prototype.globalFn2 = function () {const component = findComponentDownward(this, 'RecommendRecord2')component.getDetail2()}// ...
}/*** 由一个组件,向下找到最近的指定组件* @param {*} context 当前上下文,比如你要基于哪个组件来向上寻找,一般都是基于当前的组件,也就是传入 this* @param {*} componentName 要找的组件的 name*/
function findComponentDownward(context, componentName) {const childrens = context.$childrenlet children = nullif (childrens.length) {for (const child of childrens) {const name = child.$options.nameif (name === componentName) {children = childbreak} else {children = findComponentDownward(child, componentName)if (children) break}}}return children
}
注:如果对上述找组件的方法不熟悉的小伙伴可以移步到:找到任意组件实例的方法
- 把目光在回到
main.js
中,导入刚刚声明好的 js 文件
// ...
import Vue from 'vue'
import vmFunction from '@/utils/export2vmFunction'
Vue.use(vmFunction)
// ...
- 大功告成
经过上述三步操作后,就可以用vm.globalFn1()
来调用组件内的方法了
优点:
方便管理: 所有方法都在一个文件中
全局变量少: 只有
vm
一个变量
vue 把组件方法暴露到window对象中相关推荐
- vue开发 - 将方法绑定到window对象,给app端调用
通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用 ...
- 将Vue项目methods中的方法暴露在window上
这座城市风很大,孤独的人总是晚回家. 我是一个H5,咱们在写APP的时候,也就是APP内部嵌套咱们H5代码的时候,肯定会遇到交互问题,如果使用普通html js css的话应该没有什么太大的问题,因为 ...
- Window对象中的函数confirm方法的简单介绍
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226
MyClassroom.vue 使用组件方法实现增删改查. <template><div class="container"><div class=& ...
- js中WINDOW对象中的location成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...
- js中WINDOW对象中的navigator成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的navigator成员对象 naviga ...
- Vue父组件方法和子组件方法执行优先顺序
首先,我遇到了一个两个分离的前端项目,该父类组件调用子类组件时,不论是写在mounted还是created中,明明两个方法应该按照顺序执行,和我想的完全不一样,子组件的方法优先执行,父类的方法永远在子 ...
- oracle环境变量配置教程,oracle_window中oracle环境变量设置方法分享,window server中Oracle的环境变量设 - phpStudy...
window中oracle环境变量设置方法分享 window server中Oracle的环境变量设置 1.右击"我的电脑"->选择"属性"->选择 ...
- 工具方法:一次性将对象中所有null字段,转为空字符串
当我们的 Java 对象在响应前端,或者在做数据导出的时候,我们并不希望将对象中为 null 的属性值直接返回给前端,不然显示或导出的就是一个 null ,这样对用户不是很友好. 如果我们一个个字段的 ...
最新文章
- Chkconfig命令
- 室外排水设计规范_XXZG排水汇集器完美解决LOFT公寓卫生间排水难题
- 浅谈 Python 程序和 C 程序的整合
- sql中in和exist语句的区别?
- 第65课 采访报道 《小学生C++趣味编程》
- (软件工程复习核心重点)第三章需求分析-第一节:需求分析相关概念
- ASP.NET企业开发框架IsLine FrameWork系列之九--ExceptionProcessProvider异常框架(上)
- win7安装TensorFlow-gpu 2.3详细教程(CUDA10.1,cuDNN7)
- python unicodeencodeerror_Python发起请求提示UnicodeEncodeError错误代码解决方法
- 自己的HTML5 播放器
- Java 实现 AES 加解密
- python pytest setupclass_python – Pytest – 如何将参数传递给setup_class?
- 嵌入式系统——文件系统
- 全面罩防毒面具市场调研
- linux高通内核移植工具十教程
- java itex 打印pdf_【收藏】java使用ITEXT打印PDF
- 用python做头像_如何利用python制作微信好友头像照片墙?
- VMWare中安装Windows XP、win7
- 登录令牌 Token 介绍
- 别再恐惧 IP 协议(万字长文 | 多图预警)