VueJS XHR внутри многоразового компонента

Question

Обращаясь за советом или рекомендацией, как это сделать лучше:

У меня есть 1 глобальный многократно используемый компонент <MainMenu> внутри этого компонента. Я делаю XHR-запрос для получения пунктов меню.

Так что, если я помещу <MainMenu> в верхний и нижний колонтитулы, XHR будет отправлено 2 раза.

Я также могу пойти с реквизитом, чтобы получить пункты меню в главном родительском компоненте и передать пункты меню в <MainMenu>, например:

<MainMenu :items="items">

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

И еще один способ - использовать состояние, которое в основном совпадает с реквизитом.

Что будет лучшим вариантом для такого варианта использования?

Answer 1

Если вы не хотите создавать экземпляр нового компонента, но у вас есть главное меню во многих местах, вы можете использовать ref="menu", что позволит вам получить доступ к innerHTML или outerHTML.Я создал пример здесь , к которому вы можете обратиться.

<div id="app">
  <main-menu ref="menu" />
  <div v-html="menuHTML"></div>
</div>

refs не являются реактивными, поэтому, если вы использовали v-html="$refs.menu.$el.outerHTML", это не сработало бы, поскольку refs по-прежнему не определено при создании компонента.Чтобы отобразить его правильно, вам нужно создать свойство, которое хранит HTML-код главного меню и установить его в mounted hook:

data() {
  return {
    menuHTML: ''
  }
},
mounted() {
  this.menuHTML = this.$refs.menu.$el.outerHTML;
}

Это позволяет отображать меню несколько раз, не создавая новые компоненты, нопо-прежнему не меняет того факта, что он не реагирует.

В этом примере элементы меню хранятся в массиве items.Если бы объекты в массиве items были изменены, эти изменения были бы отражены в основном компоненте, но его клоны остались бы без изменений.В этом примере я добавляю класс «красный» к элементам через две секунды.

Чтобы это работало так, чтобы изменения отражались в клонированных элементах, вам нужно добавить наблюдатель, который наблюдает за изменениями в массиве items и обновляет menuHTML, когда замечено любое изменение:

mounted() {
  this.menuHTML = this.$refs.menu.$el.outerHTML;
  this.$watch(
    () => {
        return this.$refs.menu.items
    },
    (val) => {
      this.menuHTML = this.$refs.menu.$el.outerHTML;
    }, {
    deep: true
    }
  )
}

Вы также можете отслеживать изменения в любом свойстве данных с помощью:

this.$refs.menu._data

При этом вам не нужно передавать props компоненту главного меню и не вносить в него какие-либо изменения, но этоРешение все еще требует, чтобы в его родительском компоненте была реализована дополнительная логика.