[英]Vue2 how to change the main data component from another single file component?
How can i change the menu component in my data main.js, from a single file component that is inside another single file component.如何从另一个单个文件组件内的单个文件组件更改我的数据 main.js 中的菜单组件。
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.我还有另一个单文件组件,当我提交表单时,我需要从 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>
您可以使用道具(属性)将数据向下传递给子组件https://v2.vuejs.org/v2/guide/components.html#Props
I dont know if this is the best way but i solve my problem using my vue instance like a global variable我不知道这是否是最好的方法,但我使用我的 vue 实例(如全局变量)来解决我的问题
vm = new Vue({
...
});
window.vue = vm
and then changing然后改变
window.vue.menu = 'MenuInicial';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.