我遇到了一个问题,我通过 cookie 解决了它,但我想在没有 cookie 的情况下解决问题。我有一个名为 app-header 的组件,它还有另一个名为 outmodal 的组件。 现在,我的第一个 Vue 实例需要组件 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")
},
});
应用头代码
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']
}
外模代码
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")
}
}
在 outmodal 组件中,我连接 API 并检查登录,如果登录成功,我想在我的 Vue 实例中更改登录变量的值。我使用 web pack 来构建所有需求。所以我不知道如何在这些文件之间进行数据绑定(bind)。
我该如何解决?我
最佳答案
我找到的最佳解决方案
对于 0.12
http://012.vuejs.org/guide/components.html#Inheriting_Parent_Scope
1.0
http://v1.vuejs.org/guide/components.html#Parent-Child-Communication
2.0
https://v2.vuejs.org/v2/guide/components.html#Composing-Components (使用 props 将数据从父级单向绑定(bind)到子级)
关于data-binding - 如何在 Vue.js 中实现父孙之间的双向数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31781962/