快捷導(dǎo)航

vue如何把組件方法暴露到window對(duì)象中

更新時(shí)間：2022年09月14日 15:47:42 作者：王喬治威爾金斯瑪格麗特湯姆森希爾德薩拉陽(yáng)

這篇文章主要介紹了vue如何把組件方法暴露到window對(duì)象中，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

把組件方法暴露到window對(duì)象中

方法 1（簡(jiǎn)單，但不推薦）

mounted() {
? // 2. 在mounted階段聲明globalFn，來(lái)調(diào)用組件內(nèi)的方法
? window.globalFn = () => {
? ? this.getDetail()
? }
},
methods: {
? // 1. 組件內(nèi)有一個(gè)getDetail方法，需要暴露給window，以供嵌入該頁(yè)面的客戶端調(diào)用
? getDetail() {
? ? // 業(yè)務(wù)邏輯
? }
}

優(yōu)點(diǎn)：

簡(jiǎn)單：適合暴露的方法不太多的系統(tǒng)

缺點(diǎn)：

變量名易沖突：如果需要暴露的方法越來(lái)越多，那么 window 對(duì)象中的全局變量也會(huì)越來(lái)越多，容易變量名沖突
位置分散：隨著業(yè)務(wù)的復(fù)雜化，暴露的方法可能分散在各個(gè).vue 文件中，不容易管理

方法 2（推薦，解決方法 1 的痛點(diǎn)）

1. 在 main.js 中把 Vue 對(duì)象暴露給 window

// ...
const vm = new Vue({
? router,
? store,
? render: (h) => h(App)
}).$mount('#app')
window.vm = vm // 只把vm暴露給window，以后都在vm中做文章
// ...

2. 在一個(gè)你喜歡的目錄下新建 js 文件，該文件用來(lái)存放需要暴露出去的方法

（我是把這個(gè)文件放在了 @/utils/export2vmFunction.js 下）

exports.install = function (Vue) {
? // 把需要暴露出去的方法掛載到Vue原型上，避免了全局變量過(guò)多的問(wèn)題
? // 全局方法都在這里，方便管理
? Vue.prototype.globalFn1 = function () {
? ? const component = findComponentDownward(this, 'RecommendRecord1')
? ? component.getDetail1()
? }
? Vue.prototype.globalFn2 = function () {
? ? const component = findComponentDownward(this, 'RecommendRecord2')
? ? component.getDetail2()
? }
? // ...
}
/**
?* 由一個(gè)組件，向下找到最近的指定組件
?* @param {*} context 當(dāng)前上下文，比如你要基于哪個(gè)組件來(lái)向上尋找，一般都是基于當(dāng)前的組件，也就是傳入 this
?* @param {*} componentName 要找的組件的 name
?*/
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
}

注：如果對(duì)上述找組件的方法不熟悉的小伙伴可以移步到：找到任意組件實(shí)例的方法

3. 把目光在回到 main.js 中，導(dǎo)入剛剛聲明好的 js 文件

// ...
import Vue from 'vue'
import vmFunction from '@/utils/export2vmFunction'
Vue.use(vmFunction)
// ...

4. 大功告成

經(jīng)過(guò)上述三步操作后，就可以用vm.globalFn1()來(lái)調(diào)用組件內(nèi)的方法了

優(yōu)點(diǎn)：

方便管理：所有方法都在一個(gè)文件中
全局變量少：只有vm一個(gè)變量

將方法綁定到window對(duì)象下，給app端調(diào)用

通過(guò)jsBridge方法，H5可以調(diào)用客戶端（ios，android）的內(nèi)部方法，

同樣，客戶端也需要能調(diào)用H5頁(yè)面里定義的js方法，

但是在vue里，所有的方法都是在組件內(nèi)部聲明的，也只能在組件內(nèi)部調(diào)用，

原生調(diào)用h5方法必須定義在window對(duì)象下

mounted(){
    // 將scanResult方法綁定到window下面，提供給原生調(diào)用
    //(方法名scanResult是原生定義好的，掃描成功后會(huì)主動(dòng)調(diào)用window下的該方法)
     window['scanResult'] = (val) => {
        this.getScanVal(val)
     }
},
methods:{
    //原生調(diào)用scanResult方法后執(zhí)行g(shù)etScanVal方法，獲取到val
    getScanVal(val){
        console.log('掃一掃獲取到的：'+ val)
    },
    
    //點(diǎn)擊事件調(diào)取掃一掃功能
    doScan(){
        this.demo.doScan()//調(diào)用原生方法開(kāi)啟掃一掃
    },    
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: