Как запустить функцию в index. vue из файлов navbar. vue

Question

Итак, я выбираю, чтобы при выборе опции запускалась функция. Проблема в том, что выбор в моем navbar.vue, а функция находится в index.vue.

Функция должна быть в индексе. vue, потому что она собирает список продуктов из моей базы данных и загружает их на мой HTML.

Есть ли способ запустить функцию в index.vue из navbar.vue или запустить ту же функцию внутри navbar.vue, но отправить результат на index.vue?

Вот схема, как это должно работать для лучшего понимания:

When option selected Navbar.vue --> Runs changeCountry function in index.vue

ИЛИ

When option selected Navbar.vue --> Runs changeCountry function in navbar.vue --> Parses output to index.vue

Мой код:

Индекс. vue:

data() {
    return {
      products: null,
      countryCode: 'INT',
    };
  },
created() {
    axios.get(`${baseUrl}/api/popular?country_code=${this.countryCode}`)
      .then((response) => {
        this.products = response.data;
      });
  },
methods: {
    changeCountry(code) {
      axios.get(`${baseUrl}/api/popular?country_code=${code}`)
        .then((response) => {
          this.products = response.data;
        });
    },
  },

панель навигации. vue:

<select class="language">
                <option v-for="x in countries" :key="x.value" :value="x.value"
                        :selected="x.value === countryCode" @click="changeCountry(x.value)">
                  {{x.value}}
                </option>
              </select>

Answer 1

Есть несколько способов сделать это. Основная идея состоит в том, чтобы передать emit (возможно, с данными) из вашего компонента Navbar в индекс. vue Вы можете использовать emit от дочернего к родительскому или использовать eventBus (или даже $ root). Emit fires by @click или @change ( также вы можете поместить переменную для отслеживания крючка) https://vuejs.org/v2/guide/components.html#Passing -Data-to-Child-Components-with-Props