Cách liên kết dữ liệu hai chiều giữa cha mẹ và cháu trong Vue.js

Question

Tôi gặp phải sự cố, tôi giải quyết nó bằng cookie nhưng tôi muốn giải quyết vấn đề mà không cần cookie. Tôi có một thành phần được gọi là app-header và nó có một thành phần khác được gọi là outmodal. Bây giờ, Ví dụ Vue đầu tiên của tôi yêu cầu thành phần ứng dụng-tiêu đề.

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

mã của ứng dụng tiêu đề

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

mã của 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") 
    } 
} 

Trong thành phần outmodal tôi kết nối API và tôi kiểm tra đăng nhập, Nếu đăng nhập sẽ được succesfull, tôi muốn để thay đổi giá trị của biến đăng nhập trong ví dụ Vue của tôi. Tôi sử dụng gói web để xây dựng tất cả các yêu cầu. Vì vậy, tôi không biết làm thế nào tôi có thể liên kết dữ liệu giữa các tệp này.

Tôi có thể giải quyết nó bằng cách nào? Tôi

Answer 1

Giải pháp tốt nhất mà tôi tìm thấy

Đối với 0,12

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

cho 1,0

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

cho 2,0

https://vuejs.org/v2/guide/components.html#Composing-Components (đạo cụ sử dụng để dữ liệu liên kết một chiều từ cha mẹ sang con)

Answer 2

tôi đã tìm thấy dữ liệu này chính xác hơn. https://vuejs.org/v2/guide/components.html#sync-Modifier chỉ trong 2.3.0+ tho. và trung thực nó vẫn chưa đủ tốt. chỉ đơn giản là một lựa chọn dễ dàng để gắn kết dữ liệu 'hai chiều'. vì vậy không có tùy chọn nào trong số này là tốt.

hãy thử sử dụng vuex thay thế. họ có nhiều lựa chọn hơn cho mục đích đó. https://vuex.vuejs.org/en/state.html