vue中给window对象上添加属性的方法
web页面通讯方法、window.open打开新页面,父子页面通讯的方法最直接的就是获取对方的window对象进行调用父子各自得属性及方法。下面是整理的几种通讯得方法仅供参考。
·
web页面通讯方法、window.open打开新页面,父子页面通讯的方法最直接的就是获取对方的window对象进行调用父子各自得属性及方法。 下面是整理的几种通讯得方法仅供参考
第一种
// 第一种方法 直接对window进行添加
-----箭头函数-----
window.callAnswer = (value) => {
this.callAnswer(value) // 传参数
}
window.hangUp = () => {
this.hangUp() // 不传参数
}
-----普通函数-----
window.callAnswer = function (value) {
return this.callAnswer(value) // 传参数
}
window.hangUp = function () {
return this.hangUp() // 不传参数
}
添加对象、字符串、数字等......都可以
window.age = 18
window.name = '小张'
window.name = { name: '小张', age: 18 }
......
第二种
//第二种方法 使用jquery进行编程可以使用jq得extend方法
$.extend(window, {
a: function () {},
b: function () {},
c: function () {}
})
这中和之前的一样,添加对象、字符串、数字、箭头函数等......
第三种
// 第三种方法 就是单独建立一个js文件引入执行
() => {
let obj = {
a: function () {},
b: function () {},
c: function () {}
}
Object.keys(obj).forEach((key) => {
window[key] = obj[key]
})
}
)()
这种方法就是将需要添加的属性统一放在一个js文件中,创建一个对象,
在使用Object.keys方法将其转换成一个给定对象的自身可枚举属性组成的数组,
进行forEach循环添加赋值。
看着高级一点
第四种
// 第四种方法 构造函数
function All() {}
All.prototype = {
a: function () {},
b: function () {},
c: function () {}
}
window.func = new All()
先创建一个函数再其函数的原型上添加对应的属性方法,再将其赋值给在window自定义的属性上
第五种
将其vue的实例赋值给一个变量来接受 再将其直接挂载到window上,在新建一个js文件,把需要暴露出去的方法挂载到Vue原型上,避免了全局变量过多的问题。而且在这里进行统一全局管理。之后再main,js中进行import 引入这个js文件。将其挂载到vue实例上,就可以直接全局使用了。
第五种方法详细教程请参考下面这篇文章
vue 把组件方法暴露到window对象中_王乔治威尔金斯玛格丽特汤姆森希尔德萨拉阳的博客-CSDN博客_vue暴露方法到window
文章结束,感谢阅读。
更多推荐
已为社区贡献2条内容
所有评论(0)