目录把组件方法暴露到window对象中方法 1(简单,但不推荐)方法 2(推荐,解决方法 1 的痛点)将方法绑定到window对象下,给app端调用把组件方法暴露到window对象中
mounted() {
// 2. 在mounted阶段声明globalFn,来调用组件内的方法
window.globalFn = () => {
this.getDetail()
}
},
methods: {
// 1. 组件内有一个getDetail方法,需要暴露给window,以供嵌入该页面的客户端调用
getDetail() {
// 业务逻辑
}
}
优点:
缺点:
1. 在 main.js 中把 Vue 对象暴露给 window
// ...
const vm = new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app')
window.vm = vm // 只把vm暴露给window,以后都在vm中做文章
// ...
2. 在一个你喜欢的目录下新建 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()
}
// ...
}
function findComponentDownward(context, componentName) {
const childrens = context.$children
let children = null
if (childrens.length) {
for (const child of childrens) {
const name = child.$options.name
if (name === componentName) {
children = child
break
} else {
children = findComponentDownward(child, componentName)
if (children) break
}
}
}
return children
}
注:如果对上述找组件的方法不熟悉的小伙伴可以移步到:找到任意组件实例的方法
3. 把目光在回到 main.js 中,导入刚刚声明好的 js 文件
// ...
import Vue from 'vue'
import vmFunction from '@/utils/export2vmFunction'
Vue.use(vmFunction)
// ...
4. 大功告成
经过上述三步操作后,就可以用vm.globalFn1()来调用组件内的方法了
优点:
通过jsBridge方法,H5可以调用客户端(iOS,Android)的内部方法,
同样,客户端也需要能调用H5页面里定义的js方法,
但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用,
原生调用h5方法必须定义在window对象下
mounted(){
// 将scanResult方法绑定到window下面,提供给原生调用
//(方法名scanResult是原生定义好的,扫描成功后会主动调用window下的该方法)
window['scanResult'] = (val) => {
this.getScanVal(val)
}
},
methods:{
//原生调用scanResult方法后执行getScanVal方法,获取到val
getScanVal(val){
console.log('扫一扫获取到的:'+ val)
},
//点击事件调取扫一扫功能
doScan(){
this.demo.doScan()//调用原生方法开启扫一扫
},
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue如何把组件方法暴露到window对象中
本文链接: https://lsjlt.com/news/167541.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0