vue.js 组件之间的双向数据绑定

【问题标题】：vue.js two way data-binding between componentsvue.js 组件之间的双向数据绑定
【发布时间】：2018-11-23 14:53:41
【问题描述】：

请看一下这个不起作用的伪代码：

Vue.component('child', {
    props: [],
    template: '<div><input v-model="text"></div>',
    data: function() {
      return {child-text: ""}     
    } 
})

Vue.component('parent', {
    template: '<h1> {{text}} </h1>'
    data: function() {
      return {parent-text: ""}
    }
})

修复这段代码最优雅的方法是什么，每当用户更改子组件中输入框的内容时，子组件中的变量 child-text 和父组件中的变量 parent-text 会自动更改？我还希望如果变量 child-text 和/或 parent-text 发生变化，那么输入框的内容会分别发生变化？

【问题讨论】：

这应该对你有帮助:) stackoverflow.com/questions/48877688/…

标签： vue.js two-way-binding

【解决方案1】：

我用自己的小数据存储解决了这个问题，这是一种非常简单的方法，但对我来说已经足够好了，无需深入研究 Vuex。

首先，在初始化其他任何东西之前，我会在某处创建我的数据存储。

window.globalData = new Vue({
    data: {
        $store: {}
    },
});

之后，我添加了一个全局 Mixin，允许获取和设置数据到全局存储。

Vue.mixin({
    computed: {
        $store: {
            get: function () { return window.globalData.$data.$store },
            set: function (newData) { window.globalData.$data.$store = newData; }
        }
    }
});

然后，每个组件都可以通过this.$store 访问数据存储。您可以在这里查看一个工作示例：

https://codesandbox.io/s/62wvro7083

【讨论】：