Comment les Deux sens de la Liaison de Données Entre les Parents et les petits-enfants dans Vue.js
J'ai fait face à un problème, je le résoudre par les cookies, mais je veux résoudre le problème sans cookies. J'ai un composant qui a appelé app-d'en-tête et Il a un autre élément qui a appelé outmodal.
Maintenant, Ma première Vue exemple, exiger la composante app-d'en-tête.
var vue = new Vue({
el : "html",
data : {
title : "Site Title",
description : "description of page",
keywords : "my keywords",
view : "home",
login : "login"
},
components:{
"app-header" :require("../../components/header"),
"app-footer" :require("../../components/footer"),
"home" :require("../../views/home")
},
});
code de l'application en-tête
var Vue = require("vue");
Vue.partial("login",require("../../partials/login.html"));
Vue.partial("logged",require("../../partials/logged.html"));
module.exports = {
template : require("./template.html"),
replace : true,
components : {
outmodal : require("../outmodal")
},
props : ['login']
}
code de outmodal
var Vue = require("vue");
Vue.partial("loginModal",require("../../partials/loginModal.html"));
module.exports = {
template : require("./template.html"),
replace : true,
props : ['name'],
data : function () {
return {
userLogin : { mail : "", password : "", remember : ""}
}
},
methods : {
formSubmit : function(e){
e.preventDefault();
this.$http.post("http://example.com/auth/login",{ "email": this.userLogin.mail , "password": this.userLogin.password },function(data,status,request){
$.cookie("site_token",data.token,{expires : 1})
}).error(function(data,status,request){
});
}
}, ready : function(){
console.log("it works")
}
}
Dans outmodal composant de me connecter à l'API et je vérifie le login, Si la connexion va être un vrai succès, je veux changer la valeur de la connexion variable dans ma Vue instance. J'utilise web pack pour construire tous les exige. Donc je ne sais pas comment la liaison de données entre ces fichiers.
Comment puis-je le résoudre? Je
OriginalL'auteur Kamuran Sönecek | 2015-08-03
Vous devez vous connecter pour publier un commentaire.
La Meilleure Solution que j'ai trouvé
Pour 0.12
http://012.vuejs.org/guide/components.html#Inheriting_Parent_Scope
pour 1,0
http://v1.vuejs.org/guide/components.html#Parent-Child-Communication
pour 2.0
https://vuejs.org/v2/guide/components.html#Composing-Components (utiliser des accessoires à la façon de lier les données de parent à enfant)
Le lien pour la 1.0 est cassé
J'ai mis à jour le lien, merci
OriginalL'auteur
j'ai trouvé celui-ci pour être plus précis.
https://vuejs.org/v2/guide/components.html#sync-Modifier
seulement dans 2.3.0+ tho.
et honnêtement c'est pas encore suffisant. devrait tout simplement être une option facile pour les deux sens de " liaison de données. si aucune de ces options est la bonne.
essayez d'utiliser vuex à la place. ils ont plus d'options pour un tel but.
https://vuex.vuejs.org/en/state.html
OriginalL'auteur