Vue2 how to change the main data component from another single file component?

Question

How can i change the menu component in my data main.js, from a single file component that is inside another single file component.

I need to change the menu component when i login.

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

});

First i have a single file component from menu

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>

and i have another single file component that i need to change the menu component from my main.js when i submit the form.

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

I dont know if this is the best way but i solve my problem using my vue instance like a global variable

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

window.vue = vm

and then changing

window.vue.menu = 'MenuInicial';