中文字幕乱码人妻二区三区,国产av午夜精品一区二区入口,久久精品亚洲一区二区三区浴池

vue3函數(shù)掛載到window對象

freeflydom

2023年6月2日 16:39 本文熱度 2647

一、概述

最近項目中需要與其他系統(tǒng)集成，其他系統(tǒng)通過獲取頁面上的HTML內(nèi)容來進行集成。因此需要提供一種JS的方式來執(zhí)行網(wǎng)站的腳本。由于網(wǎng)站是基于VUE開發(fā)的，通過搜索資料，有兩種方式將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/user/get/1')
            this.$router.push({path: '/dashboard/dashboard1'})
        }
    },

通過mounted方法掛載方法到對應(yīng)的屬性中，其中jsLogin是自定義的屬性，指向VUE的jsLogin方法。

測試方式：啟動網(wǎng)頁后，F(xiàn)12調(diào)出控制臺，輸入window.jsLogin('panda','mypwd') 實現(xiàn)登錄。

三、掛載方式二

    // 注意這里需要 import Vue from 'vue'
    mounted() {
      // 第二種掛載方式
      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/user/get/1')
            this.$router.push({path: '/dashboard/dashboard1'})
        }
    },


// main.js 第二種掛載方式
window.vm = new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')