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 и / или 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