11.vue函数挂载到window对象

一、概述

最近项目中需要与其他系统集成,其他系统通过获取页面上的HTML内容来进行集成。因此需要提供一种JS的方式来执行网站的脚本。由于网站是基于VUE开发的,通过搜索资料,有两种方式将VUE的方法挂载到window对象。话不多说,直接上代码片段。

二、挂载方式一

    mounted() {
      // 第一种挂载方式
      window.jsLogin = this.jsLogin
    },
    methods: {
        // jsLogin挂载到window对象
        jsLogin(username, password) {
          this.username = username
          this.passowrd = password
          this.login()
        },
        login() {
            console.log('login username: ' + this.username + ', pwd: ' + this.passowrd)
            sessionStorage.setItem('username', this.username)
            // httpGet('/api')
            httpGet('/api/user/get/1')
            this.$router.push({path: '/dashboard/dashboard1'})
        }
    },

通过mounted方法挂载方法到对应的属性中,其中jsLogin是自定义的属性,指向VUE的jsLogin方法。
测试方式:启动网页后,F12调出控制台,输入window.jsLogin('panda','mypwd') 实现登录。


image.png

三、挂载方式二

    // 注意这里需要 import Vue from 'vue'
    mounted() {
      // 第一种挂载方式
      window.jsLogin = this.jsLogin
      // 第二种挂载方式
      Vue.prototype.jsLogin = this.jsLogin
    },
    methods: {
        // jsLogin挂载到window对象
        jsLogin(username, password) {
          this.username = username
          this.passowrd = password
          this.login()
        },
        login() {
            console.log('login username: ' + this.username + ', pwd: ' + this.passowrd)
            sessionStorage.setItem('username', this.username)
            // httpGet('/api')
            httpGet('/api/user/get/1')
            this.$router.push({path: '/dashboard/dashboard1'})
        }
    },
// main.js 第二种挂载方式
window.vm = new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

测试方式:启动网页后,F12调出控制台,输入window.vm.jsLogin('panda','mypwd') 实现登录。


image.png

四、源码地址

https://gitee.com/animal-fox_admin/learn-vue-web
branch:lesson6

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天,我们来了解一下生命周期的运行结构;它的核心部分就是mounted,下面就是它的图解: Vue提供的可以注册的...
    OrangeQjt阅读 2,770评论 0 2
  • 生命周期钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字。...
    dingFY阅读 622评论 0 0
  • vue 挂载到dom 元素后发生了什么 前一篇文章分析了new vue() 初始化时所执行的操作,主要包括调用vu...
    臣以君纲阅读 2,188评论 0 5
  • 一、新建项目 使用vue-cli3构建一个初始的Vue项目:Cli3 官方文档 以下配置是我在项目中常用的,大家可...
    用技术改变世界阅读 296评论 0 1
  • 本篇目的是介绍vue实例化到挂载到dom的整体路线,一些细节会被省略。 从new Vue()开始 所有的一切都是从...
    RiverSouthMan阅读 4,124评论 0 2