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

Data binding 如何在Vue.js中实现父子数据的双向绑定,data-binding,components,vue.js,Data Binding,Components,Vue.js,我面临一个问题,我通过cookies解决它,但我想在没有cookies的情况下解决这个问题。我有一个叫做appheader的组件,还有一个叫做outmodal的组件。 现在,我的第一个Vue实例需要组件应用程序头 var vue = new Vue({ el : "html", data : { title : "Site Title", description : "description of page", keyw

我面临一个问题,我通过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的链接已断开