如何在 Vue.js 中实现父孙之间的双向数据绑定

我遇到了一个问题，我通过 cookie 解决它，但我想在没有 cookie 的情况下解决问题。我有一个名为 app-header 的组件，它还有另一个名为 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 pack 来构建所有需求。所以我不知道如何在这些文件之间进行数据绑定。

我该如何解决它？我

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

1. Use 组件上的 props https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

2. Use v-模型属性 https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

3. Use the 同步修饰符 https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier （适用于 Vue 2.0）

4. Use v 模型参数 https://v3-migration.vuejs.org/breaking-changes/v-model.html#_3-x-syntax （适用于 Vue 3.0）

5. Use Pinia https://pinia.vuejs.org/

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

1.) 在组件上使用 props

理想情况下，道具应该仅用于将数据向下传递到组件中，而事件应该将数据传递回来。这就是系统的初衷。 （使用 v-model 或同步修饰符作为“简写”）

道具和事件易于使用，是解决最常见问题的理想方法。

使用 props 进行双向绑定是通常不建议 https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow但有可能，通过传递一个对象或数组，您可以更改该对象的属性，并且可以在子级和父级中观察到该属性，而无需 Vue 在控制台中打印警告。

因为Vue 如何观察变化 https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats所有属性都需要在对象上可用，否则它们将不会是反应性的。 如果在 Vue 完成使它们可观察后添加任何属性'set' https://v2.vuejs.org/v2/api/#Vue-set将不得不使用。

 //Normal usage
 Vue.set(aVariable, 'aNewProp', 42);
 //This is how to use it in Nuxt
 this.$set(this.historyEntry, 'date', new Date());

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

我将对象/数组作为道具传递，它是自动双向同步的 - 更改中的数据 孩子，它在父母身上改变了。

如果传递简单值（字符串、数字） 通过 props，你必须显式地使用.sync修饰符 https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

引自 -->https://stackoverflow.com/a/35723888/1087372 https://stackoverflow.com/a/35723888/1087372

2.) 使用 v-model 属性

v-model 属性是语法糖，可以轻松实现父级和子级之间的双向绑定。它与同步修饰符执行相同的操作，只是它使用特定的 prop 和特定的事件进行绑定

This:

 <input v-model="searchText">

与此相同：

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

道具必须在哪里value并且该事件必须是input

3.) 使用同步修饰符 （适用于 Vue 2.0）

同步修饰符也是语法糖，其作用与 v-model 相同，只是 prop 和事件名称由所使用的内容设置。

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

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

子级可以发出一个事件来通知父级任何更改：

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

4.) 使用 v 模型参数 （适用于 Vue 3.0）

在 Vue 3.x 中，同步修饰符被删除。

相反，您可以使用 v-model 参数来解决相同的问题

 <ChildComponent v-model:title="pageTitle" />

<!-- would be shorthand for: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

5.) 使用 Pinia（或 Vuex）

截至目前Pinia https://pinia.vuejs.org/是官方的受到推崇的 https://vuejs.org/guide/scaling-up/state-management.html#pinia状态管理器/数据存储

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

通过使用 Pinia 存储，可以更轻松地查看数据突变流，并且它们是明确定义的。通过使用vue开发者工具 https://github.com/vuejs/vue-devtools调试和回滚所做的更改很容易。

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

看看他们的入门 https://pinia.vuejs.org/introduction.html#why-should-i-use-pinia section

如果你的项目已经使用Vuex，你可以继续使用它。

Vuex 3 和 4 仍将得到维护。然而，它不太可能为其添加新功能。 Vuex 和 Pinia 可以安装在同一个项目中。如果您要将现有的 Vuex 应用程序迁移到 Pinia，它可能是一个合适的选择。但是，如果您计划开始一个新项目，我们强烈建议您使用 Pinia。