Как повторно рендерить родительский компонент из дочернего, используя глобальные переменные?

В Vue.js, рендеринг компонентов происходит на основе реактивных данных, которые могут быть либо локальными, привязанными к компоненту, либо глобальными, доступными для всех компонентов.

Чтобы повторно рендерить родительский компонент из дочернего, используя глобальные переменные, вам нужно использовать механизмы, предоставляемые Vue.js, в частности, его систему событий и глобальное хранилище данных.

Первым шагом будет создание и настройка глобального хранилища данных. Вы можете воспользоваться Vuex - официальным пакетом управления состоянием для Vue.js, который предоставляет удобный способ управления и обновления глобального состояния приложения.

Чтобы установить Vuex, выполните следующую команду:

npm install vuex

Затем создайте файл store.js, где определите глобальное состояние и методы его изменения:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
  },
});

export default store;

Импортируйте этот файл и добавьте его в ваш компонент Vue в опции store:

import store from './store.js';

new Vue({
  store,
  //...
});

Теперь, чтобы повторно рендерить родительский компонент, когда изменяется глобальная переменная, вы можете использовать mapState и mapMutations из Vuex.

Перед использованием mapState и mapMutations вам потребуется импортировать их следующим образом:

import { mapState, mapMutations } from 'vuex';

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

export default {
  computed: {
    ...mapState(['counter']),
  },
  //...
}

Теперь каждый раз, когда counter изменяется, вам будет доступно его обновленное значение в вычисляемом свойстве counter.

Для изменения глобальной переменной counter из дочернего компонента вы можете использовать мутацию increment, которую мы определили ранее:

export default {
  methods: {
    ...mapMutations(['increment']),
    incrementCounter() {
      this.increment();
    },
  },
  //...
}

Теперь при вызове метода incrementCounter в дочернем компоненте, глобальная переменная counter будет обновляться, и родительский компонент будет повторно рендериться.

Таким образом, вы можете повторно рендерить родительский компонент из дочернего, используя глобальные переменные с помощью Vuex и его механизма событий и хранилища данных.