Vue.js 中如何在父孙之间进行双向数据绑定

2022-01-21 00:00:00 components vue.js data-binding

我遇到了一个问题，我通过 cookie 解决了它，但我想在没有 cookie 的情况下解决问题.我有一个名为 app-header 的组件，它还有另一个名为 outmodal 的组件.现在，我的第一个 Vue 实例需要组件 app-header.

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

app-header 代码

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

模态代码

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 来构建所有需求.所以我不知道如何在这些文件之间进行数据绑定.

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.

我该如何解决?我

推荐答案

我找到的最佳解决方案

对于 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://vuejs.org/v2/guide/components.html#Composing-Components(使用 props 将数据从父级单向绑定到子级)

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

相关文章