Jak dwukierunkowe powiązanie danych między rodzicami i wnukami w Vue.js

Question

Napotykałem problem, rozwiązałem go przez ciasteczka, ale chcę rozwiązać problem bez ciasteczek. Mam komponent, który wywołał nagłówek aplikacji i ma inny składnik, który nazwał outmodal. Moja pierwsza instancja Vue wymaga nagłówka aplikacji komponentu.

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") 
    }, 
}); 

kod aplikacji nagłówku kodu

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'] 
} 

z 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") 
    } 
} 

W outmodal komponentu I połączyć API i sprawdzić logowania Jeśli logowania będzie udana, chcę zmienić wartość zmiennej logowania w mojej instancji Vue. Używam pakietu internetowego do budowania wszystkich wymagań. Tak więc nie wiem, w jaki sposób można powiązać dane między tymi plikami.

Jak mogę to rozwiązać? I

Answer 1

najlepsze rozwiązanie, które znaleziono

Do 0,12

http://012.vuejs.org/guide/components.html#Inheriting_Parent_Scope

przez 1,0

http://v1.vuejs.org/guide/components.html#Parent-Child-Communication

przez 2,0

https://vuejs.org/v2/guide/components.html#Composing-Components (do użytku podpory dane wiążące w jedną stronę od rodzica do dziecka)

Answer 2

Znalazłem ten, który jest dokładniejszy. https://vuejs.org/v2/guide/components.html#sync-Modifier tylko w 2.3.0+ tys. i szczerze mówiąc nadal nie jest wystarczająco dobre. powinna po prostu być łatwą opcją do "dwukierunkowego" wiązania danych. więc żadna z tych opcji nie jest dobra.

spróbuj użyć vuex zamiast tego. mają więcej opcji do tego celu. https://vuex.vuejs.org/en/state.html