Question

我遇到了一个问题，我用cookies解决了这个问题，但我想解决没有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")
    },
});

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

outmodal代码

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

我该如何解决？我

Answer 1

我找到的最佳解决方案

0.12

http://012.vuejs.org/guide/components.html#Inheriting_Parent_Scope

for 1.0

http://v1.vuejs.org/guide/components.html#Parent-Child-Communication

for 2.0

https://vuejs.org/v2/guide/components.html#Composing-Components（使用道具将单向绑定数据从父节点绑定到子节点）

Answer 2

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

请记住，对于双向绑定，它可能导致一系列难以维持的突变，引用自文档：

不幸的是，真正的双向绑定会造成维护问题，因为子组件可以使父项发生变异，而在父项和子项中均不明显该变异的来源。

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

1。）在组件上使用道具

道具易于使用，是解决大多数常见问题的理想方法。
由于how Vue observes changes，所有属性都必须在对象上可用，否则它们将不具有响应性。
如果在Vue完成后添加了任何属性，则必须使用可观察到的'$ set'。

this.$set(this.historyEntry, 'date', new Date());

该对象对组件和父对象都是反应性的

我将对象/数组作为道具传递，它自动进行双向同步-在   子代，在父代中已更改。

如果您传递简单值（字符串，数字）   通过道具，您必须显式使用.sync修饰符：   http://vuejs.org/guide/components.html#Prop_Binding_Types

引自-> Vue.js - access data from root instance within component

2。）使用v-model属性

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

此：

<input v-model="searchText">

与此相同：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

道具必须为 value 且事件必须为 input

3。）使用同步修改器

sync修饰符也是语法糖，并且与v-model相同，只是prop和event名称由正在使用的任何东西来设置。

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

<text-document v-bind:title.sync="doc.title"></text-document>

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

this.$emit('update:title', newTitle)

4。）使用Vuex

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

通过使用Vuex存储，可以更轻松地查看数据突变的流，并明确定义了它们。通过使用vue developer tools，可以轻松调试和回滚所做的更改。

这种方法需要更多样板，但是如果在整个项目中使用，它将变得更加清晰，可以定义如何进行更改以及从何处进行更改。

请参见getting started guide

Answer 3

我发现这个更准确。 https://vuejs.org/v2/guide/components.html#sync-Modifier 仅在2.3.0+ tho。说实话，它还不够好。应该只是“双向”数据绑定的简单选项。所以这些选择都不好。

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

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

3 个答案: