Data binding 如何在Vue.js中实现父子数据的双向绑定

我面临一个问题，我通过cookies解决它，但我想在没有cookies的情况下解决这个问题。我有一个叫做appheader的组件，还有一个叫做outmodal的组件。 现在，我的第一个Vue实例需要组件应用程序头

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包构建所有需要的文件。所以我不知道如何在这些文件之间绑定数据

---

我怎样才能解决它？我找到了最好的解决办法

0.12

1.0版

2.0版

---

（使用道具将数据从父级单向绑定到子级）

我发现这个更准确。 仅在2.3.0+tho中。 老实说，这还不够好。应该是“双向”数据绑定的简单选项。所以这些选择都不是好的

尝试改用vuex。为此，他们有更多的选择。

---

有几种方法可以做到这一点，其他答案中也提到了一些方法：

使用

使用

使用

使用

对于双向绑定，请记住它可能导致难以维持的突变链， 引自文件：

不幸的是，真正的双向绑定可能会产生维护问题，因为子组件可以变异父组件，而父组件和子组件中的变异源都不明显

以下是可用方法的一些详细信息：

1.）在组件上使用道具

道具易于使用，是解决大多数常见问题的理想方法。
因为所有属性都需要在对象上可用，否则它们将不会是反应性的。 如果在Vue完成使其可观察后添加任何属性，则必须使用这些属性

//正常使用
Vue.set（可变，'aNewProp'，42）；
//这是如何在Nuxt中使用它
此.$set（this.historyEntry，'date'，new date（））；

对于组件和父对象，对象都是被动的：

如果你将一个对象/数组作为道具传递，它将自动进行双向同步-在 子级，则在父级中更改

如果传递简单值（字符串、数字） 通过道具，您必须明确使用

引自-->

2.）使用v型属性

v-model属性是语法糖，可以在父级和子级之间轻松地进行双向绑定。它所做的事情与sync修饰符所做的事情相同，只是它为绑定使用了一个特定的道具和一个特定的事件

这：

与此相同：

其中，道具必须是值，事件必须是输入

3.）使用同步修改器

sync修饰符也是语法糖，其作用与v-model相同，只是道具和事件名称由正在使用的任何东西设置

在父级中，它可以按如下方式使用：

可以从子级发出事件，通知父级任何更改：

this.$emit（'update:title'，newTitle）

4.）使用Vuex

Vuex是一种数据存储，可从每个组件访问。 可以订阅更改

通过使用Vuex存储，可以更容易地查看数据突变流，并且它们是显式定义的。通过使用，可以轻松调试和回滚所做的更改

这种方法需要更多的样板文件，但如果在整个项目中使用，它将成为定义如何进行更改以及从何处进行更改的更干净的方法

---

请参见

此链接对我有效。1.0的链接已断开