如何从组件 vue 更改主 vuetify 应用程序中的值

Question

我有两个 vue 文件，app.vue 和 logincomponent.vue。

我使用 logincomponent.vue 制作登录框的模板，并使用脚本与 go backend 在 wails 中进行通信，代码本身可以工作，但我正在尝试更改 main app.vue 中的值，但我无法让它工作.

问题是： “如何从组件更改主 vue 应用程序中的变量值？”

进口：

    import LoginScreen from "./components/LoginScreen.vue"

变量：

        data: () => ({
            drawer: false,
            currentScreenID: 0,
            logged: false

二传手：

sendLogin: function () {
                var self = this;
                if (this.$refs.login_form.validate()) {
                    self.dialog = true;
                    self.loadingCircleLogin = true;
                    self.login_dialog_title = self.login_dialog_logging_title;
                    window.backend.sendLoginToBackend(self.email, self.password, self.remember_email).then(result => {
                        if (result === false) {
                            self.loadingCircleLogin = false;
                            self.loginFailText = true;
                            self.login_dialog_title = self.login_dialog_error_title;
                        } else {
                            self.dialog = false;
                            self.currentScreenID = 3;
                        }
                    })
                }
            },

Answer 1

如果父组件（或主 Vue 实例）的状态可以从子组件更改，简短的回答是 否 或至少 不应该这样做强>。这是一种反模式，可能会在您的代码中产生错误。

但是你在这里有两个选择。

• 从子组件发出事件，并从父组件处理它。所以父母有责任用自己的逻辑改变自己的状态。 当您需要从子组件更改主实例的值时，您会发出事件，即使您可以将值传递给发出函数，然后您对主实例进行编程以侦听该事件并做出相应的响应。 更多信息在这里：listening to child component events。

• 将 Vuex 商店添加到您的应用程序。通过这种方式，您可以抽象出几个组件共有的应用程序状态。因此，您的子组件可以要求商店更改某些状态。 更多信息在这里：Vuex

  使用 Vuex 比较复杂，如果你的应用很简单，我会选择第一个选项。