Архитектура vue application

Question

Приложение имеет различные инструменты (страницы) со своей структурой.Например, инструмент поиска отелей (на левой панели списка, на правой карте) или инструмент отчетов (полная ширина страницы), и таких инструментов много.

Я нашел интересный компонентдля работы с панелями на github .И он начал делать что-то вроде этого:

//MyPanes.vue
<splitpanes class="default-theme" horizontal>
        <span>
            <div class="left-panel"><slot name="left"></slot></div> 
        </span>
        <span splitpanes-min="20" splitpanes-max="50" :splitpanes-default="horizontal_splitter[1]">
            <div class="right-panel"><slot name="right"></slot></div>
        </span>
</splitpanes>

//HotelTool.vue      
<MyPanes>
      <template slot="left">
        <v-btn @click.native="add">Add counter</v-btn>
      </template>
      <template slot="right">
        <div>{{ counter }}</div>
        <v-map />
      </template>
</MyPanes>

..
data: {
   counter: 0
},
methods: {
   add() { this.counter++; }
}
.. 

Счетчик сделан для теста.Но это не работает.Возможно потому, что содержимое слота не знает о данных родителя.

Таким образом, возникает вопрос.Как реализовать это поведение?Нужно отказаться от слотов?

Конечно, вы можете сделать это через шину событий или магазин, но у меня много инструментов, и таким образом не очень удобно передавать данные.Я хотел бы создать инструмент в одном файле, написать в нем логику для левой и правой частей, чтобы они знали друг о друге.Как и все инструменты.

Не могли бы вы поделиться своими мыслями?Как изменить данные между слотами в контексте одного родителя?И есть ли другие решения?

Пример инструмента Пример инструмента С левой и правой стороны могут быть разные компоненты.

Полный код:

<template>
    <MyPanes>
        <template v-slot:left>
            <h1>Мониторинг</h1>
            <v-btn @click.native="add">{{ counter }}</v-btn>
        </template>
        <template v-slot:right>
            {{counter}}
        </template>
    </MyPanes>
</template>

<script>
    export default {
        data() {
            return {
                counter: 0,
            }
        },
        methods: {
            add: function () {
                this.counter++;
            }
        }
    }
</script>

Answer 1

Сценарное решение

Здесь не должно быть проблем с областью данных, поскольку все ссылки на данные выполняются внутри экземпляра HotelTool.

Не забывайте, что 'data '- это функция, которая возвращает объект в Vue:

data() {
   return {
       counter: 0
   }
},
methods: {
   add() { this.counter++; }
}

Также обновите событие @click для пассивного запуска, заменив .native на .passive :

<v-btn @click.passive="add">Add counter</v-btn>

Реактивность Splitpanes

В документации Splitpanes заявляется об отключении или блокировке реактивности по умолчанию на их веб-сайте .Вы можете добавить элемент watch-slots для восстановления реактивности.

<splitpanes watch-slots class="default-theme" horizontal>
....

---

Общий ответ: передача данных между экземплярами Vue

В качестве более общего ответа дляБудущие читатели, задающие тот же вопрос, могут обмениваться данными между экземплярами в Vue следующим образом:

Переход к реквизиту и генерация с событиями (рекомендуется): VueJS.org Props и, Пользовательские события VueJS.org

Глобальное хранилище данных: Руководство Vuex

Я бы порекомендовал привыкнуть к первому варианту, так как это рекомендуется вVue документация и адекватна для большинства сценариев.Подход Vuex начинает становиться полезным для более крупных приложений.

Совет: Ошибки консоли Vue довольно полезны и часто являются первым местом, где нужно искать ошибки, связанные с областью видимости.Они также предлагают расширение для Chrome, которое помогает отслеживать состояние ваших приложений в режиме реального времени.