Компиляция шаблонов Vue.js на лету с помощью v-runtime-template

Компиляция шаблонов Vue.js на лету с помощью v-runtime-template

От автора: недавно я выпустил v-runtime-template, компонент Vue, который позволяет очень просто компилировать и интерпретировать Vue js шаблоны во время выполнения с использованием API-интерфейса, подобного v-html. У меня была проблема в проекте, когда мне приходилось получать шаблон с сервера. Почему, спросите вы? Ну, представьте себе обычный drag-n-drop интерфейс, который позволяет пользователю создавать какой-то внешний вид. Он сохраняется как код шаблона Vue, который использует компоненты, реализованные в интерфейсе. Интерфейс вызывает API для доступа к этому контенту позже, чтобы заполнить раздел страницы.

Вы, вероятно, сделали бы это с помощью простого HTML, используя v-html. Давайте рассмотрим пример, чтобы легче все понять.

Введение простого HTML с помощью v-html

Используя v-html, вы можете вставлять HTML в любой элемент DOM на лету:

Хорошо, это кажется довольно разумным. Строка template может идеально передаваться от вызова Ajax сервера. Но что если мы хотим, чтобы в шаблоне был некоторый код шаблона Vue?

v-html будет интерпретировать этот шаблон как простой HTML, а эти теги не существуют в HTML.

Ввод v-runtime-шаблон

Именно здесь вступает в действие v-runtime-template. Он предлагает аналогичный с v-html API, но интерпретирует конкретный код шаблона Vue.

v-runtime-template автоматически получает контекст родительского компонента, где он используется, а затем применяет динамический компонент, чтобы компилировать и прикреплять Vue, как вы можете видеть в функции рендеринга кода.

Чтобы предыдущий код заработал, вам просто нужно использовать v-runtime-template, передавая шаблонную поддержку следующим образом:

Имейте в виду, что при использовании v-runtime-template у вас все еще есть те же правила, что вы используете, когда этот шаблон является частью компонента. В этом случае либо app-title, либо vue-router должны быть зарегистрированы глобально или добавлены в компонент:

Доступ к родительской области

Замечательная вещь в v-runtime-templateзаключается в том, что он может получать доступ к родительской области, что означает доступность через data, props, computed или methods. Таким образом, вы можете иметь динамические шаблоны, которые имеют доступ к реактивным данным от родительского элемента.

Например, следующий шаблон может получить доступ к animal:

Или вызвать метод:

Наши строки или серверные шаблоны никогда не были так тесно связаны с приложением!

Заключение

v-runtime-template был создан, чтобы, используя синтаксис типа v-html, решать проблемы интерпретации шаблонов «на лету» для таких случаев, как шаблоны, поступающие с сервера; когда они получены во время выполнения. Если вам нужна дополнительная информация, вы можете посмотреть официальную демо-версию или репозиторий. Вы также можете оставить отзыв!

Автор: Alex Jover Morales

Источник: //alligator.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: