将vue methods方法挂载到全局window对象，给app端或后台使用 vue项目

最新推荐文章于 2024-06-26 09:41:50 发布

原创最新推荐文章于 2024-06-26 09:41:50 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue项目遇到问题 #前端

前端同时被 3 个专栏收录

29 篇文章

订阅专栏

项目遇到问题

15 篇文章

订阅专栏

vue学习

5 篇文章

订阅专栏

本文介绍如何在Vue中将组件方法暴露给Window对象，以便客户端（如iOS、Android）调用。通过在mounted生命周期钩子中绑定方法到Window，实现H5与客户端的交互。

通过jsBridge方法，H5可以调用客户端（ios，android）的内部方法，同样，客户端也需要能调用H5页面里定义的js方法，但是在vue里，所有的方法都是在组件内部声明的，也只能在组件内部调用，并没有绑定window对象下面，这样一来，vue组件里定义的方法怎么暴露给window对象，提供给外部调用呢？

created() {
},
mounted() {
    /*将backToday方法绑定到window下面，提供给外部调用 后端在使用的时候调取backToday即可
      我们前端 写好方法等待后台调用触发window['backToday']（等同于window.backToday）方法*/
     window['backToday'] = () => {
        this.goToday()
     }
 },
 methods: {
    goToday() {
        // to do something
    }
 }