(Подход к) переменных шаблонов Vue.js

Эта проблема

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

В основном мы хотели бы избежать:

  

    

    🏷️ {{ getUserData(id).name }}

    🔗 {{ getUserData(id).homepage }}
  

Общие решения

Мы могли бы описать эту проблему как «вычисленные свойства с аргументами», и у нее уже есть некоторые установленные решения:

Аутсорсинговые компоненты

В значительной степени канонический способ осуществляется посредством рефакторинга: мы могли бы на аутсорсинге

Этот компонент получит id В качестве опоры и хранить соответствующие метаданные в вычисленном свойстве, которое затем кэшируется VUE, пока его не нужно переоценить.

  




  

  🏷️ {{ metadata.name }}

  🔗 {{ metadata.homepage }}

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

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

Запомните результаты метода

Мы также могли бы запомнить результаты getuserdata () Анкет

Однако это также может быть утомительно для реализации, обычно он работает только с сериализуемыми входными данными – и со всеми подходами, добавление еще одного слоя меморизации поверх Vue напоминает, что соответствует Vue Way ™.

Мой подход

Для моих проектов мне нравится использовать другой (менее очевиден, и Afaict Менее распространенный) подход: я создаю вспомогательный компонент, который я называю Анкет

Это действительно, очень крошечный:

const Pass = {
  render() {
    return this.$scopedSlots.default(this.$attrs)
  }
}

По сути, это компонент заполнителя, который не делает сам элемент DOM, но передает все реквизиты, которые он получает своему ребенку.

Итак, давайте переписаем наш список с Помощник:

  
    

      

      🏷️ {{ metadata.name }}

      🔗 {{ metadata.homepage }}
    
  

Это только оценит getuserdata () один раз: когда отображается. Хороший и чистый, не так ли?

Кроме того, вот кода и ящик, где вы можете возиться с примером, который я описал:

Предостережения

Честно говоря, есть несколько недостатков этого подхода:

• Компонент помощника использует Слот с обрезкой Для передачи данных. Это означает, может иметь только один дочерний компонент.
• Другим ограничением этого подхода является то, что разметка введена в слот должен сделать реальный узел DOM. Мы не можем просто установить Слот-шкаф на чем -то вроде <Шаблон> Анкет

Вот и все. Я надеюсь, что это поможет упростить ваши шаблоны VUE!

Оригинал: “https://dev.to/loilo/an-approach-to-vuejs-template-variables-5aik”