Vue2 Wie ändere ich die Hauptdatenkomponente von einer anderen einzelnen Dateikomponente?

Question

Wie kann ich die Menükomponente in meiner Datei main.js von einer einzelnen Dateikomponente aus ändern, die sich in einer anderen einzelnen Dateikomponente befindet.

Ich muss die Menükomponente ändern, wenn ich mich anmelde.

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(){ 

}); 

Zuerst habe ich eine einzelne Datei Komponente aus dem Menü

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> 

und ich habe eine andere einzelne Datei-Komponente, die ich brauche, um das Menü Komponente aus meinem main.js zu ändern, wenn ich das Formular abzuschicken.

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

Sie können Daten weitergeben zu geordneten Komponenten mit Requisiten (Eigenschaften) https://vuejs.org/v2/guide/components.html#Props

Answer 2

Ich weiß nicht, ob dies der beste Weg ist, aber ich mein Problem lösen meine vue Instanz wie eine globale Variable

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

window.vue = vm 

und dann ändert

window.vue.menu = 'MenuInicial';