Как изменить значение в основном приложении vuetify из компонента vue

Question

У меня есть два vue файла, приложение. vue и logincomponent. vue.

Я использую logincomponent. vue, чтобы создать шаблон, который создает окно входа и использует сценарии для связи с go бэкэнд в плаче, сам код работает, но я пытаюсь изменить значение в основном приложении. 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 экземпляра) можно изменить с дочернего компонента, это нет или, по крайней мере, , это не следует делать . Это анти-шаблон и может привести к ошибкам в вашем коде.

Но у вас есть два варианта здесь.

• Чтобы отправить событие из дочернего компонента и обработать его из родительского компонента. Таким образом, родитель отвечает за изменение своего собственного состояния с помощью своих собственных логик c. Когда вам нужно изменить значение из основного экземпляра из дочернего компонента, вы отправляете событие, даже если вы можете передать значение функции emit, и вы программируете свой основной экземпляр для прослушивания этого события и соответствующего ответа. Подробнее здесь: прослушивание событий дочерних компонентов .

• Чтобы добавить магазин Vuex в ваше приложение. Таким образом вы абстрагируете состояние приложения, которое является общим для нескольких компонентов. Таким образом, ваш дочерний компонент может попросить магазин изменить определенное состояние. Больше информации здесь: Vuex

  Использование Vuex - более сложное тесто, если ваше приложение простое, я бы go с первым вариантом.