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

Question

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

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 and/or parent-text改变那么输入框的内容也会相应改变？

Answer 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

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

vue.js two way data-binding between components

vue.js

two-way-binding