如何在 vuejs+electron 中调用“导出默认”范围之外的方法？答案

【问题标题】：How can I call method outside 'export default' scope in vuejs+electron?如何在 vuejs+electron 中调用“导出默认”范围之外的方法？
【发布时间】：2020-02-23 06:39:37
【问题描述】：

当我通过拖动标题栏最大化窗口时，电子会发出“最大化”事件。我想调用存在于“导出默认”范围内的“最大化”方法。怎么打电话？

<template>
    <div class="window-titlebar">
        <div class="title">{{ title }}</div>
    </div>
</template>

<script>
const electron = require('electron');
import { ipcRenderer } from 'electron';

export default {
    name: 'window-titlebar',
    data() {
        return {
           title: false
        }
    },
    methods: {
        maximize: function() {
            this.title = true;
        }
    }

}

ipcRenderer.on('maximize', () => {
    // I want to call 'maximize' method here
})

</script>

【问题讨论】：

标签： javascript vue.js electron-builder

【解决方案1】：

在父级中，定义一个引用

<WindowTitlebar ref="titlebar" />

然后通过$refs调用方法

this.$refs.titlebar.maximize();

【讨论】：

【解决方案2】：

最好在组件本身上注册事件处理程序，这样您可以将事件处理程序的存在与组件的生命周期联系起来，并且事件处理程序将在组件实例的上下文中执行。

export default {
    name: 'window-titlebar',
    data() {
        return {
            title: false
        }
    },
    created() {
        ipcRenderer.on('maximize', this.onMaximize)
    },
    destroyed() {
        ipcRenderer.off('maximize', this.onMaximize)
    },
    methods: {
        onMaximize() {
            this.title = true
        }
    }
}

【讨论】：