Vue2如何從另一個單文件組件更改主要數據組件？

Question

如何從另一個單個文件組件內的單個文件組件更改我的數據 main.js 中的菜單組件。

我登錄時需要更改菜單組件。

main.js

var Vue = require('vue');
var VueResource = require('vue-resource');
var login = require('../vue/menuLogin.vue');
var inicio = require('../vue/menuInicial.vue');
var criacao = require('../vue/menuCriacao.vue');

Vue.use(VueResource);

var vm = new Vue({
  el: 'body',

  data: {
    //need to be changed on form submit
    menu: null,
  },

  components: {
    'MenuLogin': login, 
    'MenuInicial': inicio,
    'MenuCriacao': criacao
  },

  methods: {
    mudarMenu: function(menu) {
      this.menu = menu
    }
  },
  ready() {
    this.mudarMenu('MenuLogin')
  }
});
$(document).ready(function(){

});

首先我有一個來自菜單的文件組件

menuLogin.vue

<template>
...
</template>
<script>
var cadastro = require('../vue/registro-f.vue');
var login = require('../vue/login-f.vue');
export default {
    data(){
        return{
            formulario: null
        }
    },
    components: {
        'Cadastro': cadastro,
        'Login': login
    },
    methods: {
        mudarFormulario: function(form) {
            this.formulario = form
        }
    },
    ready (){
        this.mudarFormulario('Login');
    }
}
</script>
<style>
...
</style>

我還有另一個單文件組件，當我提交表單時，我需要從 main.js 更改菜單組件。

login-f.vue

<template>
...
</template>
<script>
    export default {
        methods: {
            criaLogin: function() {
                function montarLogin(email,senha){
                    return{
                        "email":email,
                        "password":senha
                    }
                }

                function logar(usuario, sucesso, falha){
                    $.ajax({
                        url: "http://localhost:8080/login",
                        type: 'post',
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(usuario),
                        timeout: 15000,
                        async: true,
                        success: function(json){
                            sucesso(json)
                        },
                        error: function(jqXHR, exception){
                            falha(jqXHR, exception)
                        }
                    });
                }

                var email = $('#emailLogin').val();
                var senha = $('#passwordLogin').val();

                $('#loading').modal('open');
                function sucesso(json){
                    if(json == ""){
                        Materialize.toast("Login ou senha incorretos.", 5000);
                        $('#loading').modal("close");
                    }
                    else{
                        var storage = window.localStorage;
                        storage.setItem("usuario", JSON.stringify(json));
                        var usuario = JSON.parse(storage.getItem("usuario"));
                        //I need to change the menu here
                        //
                        //
                    }
                }
                function falha(jqXHR, exception){
                    Materialize.toast("Sinto muito... ocorreu um erro.", 1500);
                    $('#loading').modal("close");
                }
                logar(montarLogin(email,senha),sucesso,falha);
            }
        }
    }
</script>
<style>
...
</style>

Answer 1

您可以使用道具（屬性）將數據向下傳遞給子組件https://v2.vuejs.org/v2/guide/components.html#Props

Answer 2

我不知道這是否是最好的方法，但我使用我的 vue 實例（如全局變量）來解決我的問題

vm = new Vue({
...
});

window.vue = vm

然后改變

window.vue.menu = 'MenuInicial';