How to Two-way Data Binding Between Parents and grandchildren in Vue.js

Question

I faced a problem, I solve it by cookies but I want to solve the problem without cookies. I have a component which called app-header and It has another component which called outmodal. Now, My first Vue instance require component app-header.

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 of app-header

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

In outmodal component I connect the API and I check the login, If login will be succesfull, I want to change value of login variable in my Vue instance. I use web pack to build all requires. So I don't know how can I data binding between these files.

How can I solve It? I

Answer 1

The Best Solution which I found

For 0.12

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

for 1.0

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

for 2.0

https://vuejs.org/v2/guide/components.html#Composing-Components (use props to one-way bind data from parent to child)