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://vuejs.org/v2/guide/components.html#Props

Answer 2

我不知道这是否是最好的方法，但我使用我的vue实例解决了我的问题，如全局变量

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

window.vue = vm

然后改变

window.vue.menu = 'MenuInicial';

Vue2如何从另一个单个文件组件更改主数据组件？

2 个答案: