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: ""}
    }
})

修复此代码的最优雅的方法是，每当用户更改子组件中输入框的内容时，子组件中的可变子文本和父组件中的可变父文本将自动更改？我还希望如果变量子文本和/或父文本更改，那么输入框的内容将分别更改？

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