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

Posted 2023-02-22

【中文标题】如何从组件 vue 更改主 vuetify 应用程序中的值

【英文标题】：How to change value in main vuetify app from component vue

【发布时间】：2020-05-31 04:15:26

【问题描述】：

我有两个 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;
                        
                    )
                
            ,

【问题讨论】：

main.vue中有sendLogin函数吗？

【参考方案1】：

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

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

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

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

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

【讨论】：

我刚刚使用事件解决了这个问题，我创建了事件并在完成登录后发出，感谢您的帮助