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

数据绑定 Vue.js

阿飞前端

2020-03-12

我遇到了一个问题,可以通过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实例中更改login变量的值。我使用Web Pack构建所有需求。所以我不知道如何在这些文件之间进行数据绑定。

我该如何解决?一世

第1137篇《如何在Vue.js中的父子之间进行双向数据绑定》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
神无宝儿 2020.03.12

我发现这是更准确的。 仅在2.3.0及更高版本中才https://vuejs.org/v2/guide/components.html#sync-Modifier老实说,它还不够好。应该只是“双向”数据绑定的简单选择。所以这些选择都不是好选择。

尝试改用vuex。他们为此目的有更多选择。 https://vuex.vuejs.org/en/state.html

凯十三 2020.03.12

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android