От автора: недавно я выпустил v-runtime-template, компонент Vue, который позволяет очень просто компилировать и интерпретировать Vue js шаблоны во время выполнения с использованием API-интерфейса, подобного v-html. У меня была проблема в проекте, когда мне приходилось получать шаблон с сервера. Почему, спросите вы? Ну, представьте себе обычный drag-n-drop интерфейс, который позволяет пользователю создавать какой-то внешний вид. Он сохраняется как код шаблона Vue, который использует компоненты, реализованные в интерфейсе. Интерфейс вызывает API для доступа к этому контенту позже, чтобы заполнить раздел страницы.
Вы, вероятно, сделали бы это с помощью простого HTML, используя v-html. Давайте рассмотрим пример, чтобы легче все понять.
Введение простого HTML с помощью v-html
Используя v-html, вы можете вставлять HTML в любой элемент DOM на лету:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div> <div v-html="template"></div> </div> </template> <script> export default { data: () => ({ template: ` <h2>Howdy Yo!</h2> <a href="croco-fantasy">Go to the croco-fantasy</a> ` }), }; </script> |
Хорошо, это кажется довольно разумным. Строка template может идеально передаваться от вызова Ajax сервера. Но что если мы хотим, чтобы в шаблоне был некоторый код шаблона Vue?
|
1 2 3 4 5 6 7 8 |
export default { data: () => ({ template: ` <app-title>Howdy Yo!</app-title> <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router> ` }), }; |
v-html будет интерпретировать этот шаблон как простой HTML, а эти теги не существуют в HTML.
Ввод v-runtime-шаблон
Именно здесь вступает в действие v-runtime-template. Он предлагает аналогичный с v-html API, но интерпретирует конкретный код шаблона Vue.
v-runtime-template автоматически получает контекст родительского компонента, где он используется, а затем применяет динамический компонент, чтобы компилировать и прикреплять Vue, как вы можете видеть в функции рендеринга кода.
Чтобы предыдущий код заработал, вам просто нужно использовать v-runtime-template, передавая шаблонную поддержку следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div> <v-runtime-template :template="template"/> </div> </template> <script> import VRuntimeTemplate from "v-runtime-template"; export default { data: () => ({ template: ` <app-title>Howdy Yo!</app-title> <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router> ` }), }; </script> |
Имейте в виду, что при использовании v-runtime-template у вас все еще есть те же правила, что вы используете, когда этот шаблон является частью компонента. В этом случае либо app-title, либо vue-router должны быть зарегистрированы глобально или добавлены в компонент:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import VRuntimeTemplate from "v-runtime-template"; import AppTitle from "./AppTitle"; export default { data: () => ({ template: ` Howdy Yo! Go to the croco-fantasy ` }), components: { AppTitle } }; |
Доступ к родительской области
Замечательная вещь в v-runtime-templateзаключается в том, что он может получать доступ к родительской области, что означает доступность через data, props, computed или methods. Таким образом, вы можете иметь динамические шаблоны, которые имеют доступ к реактивным данным от родительского элемента.
Например, следующий шаблон может получить доступ к animal:
|
1 2 3 4 5 6 7 8 |
export default { data: () => ({ animal: "Crocodile", template: ` <app-title>Howdy {{animal}}!</app-title> ` }) // ... |
Или вызвать метод:
|
1 2 3 4 5 6 7 |
}), methods: { goToCrocoland() { // ... } } // ... |
Наши строки или серверные шаблоны никогда не были так тесно связаны с приложением!
Заключение
v-runtime-template был создан, чтобы, используя синтаксис типа v-html, решать проблемы интерпретации шаблонов «на лету» для таких случаев, как шаблоны, поступающие с сервера; когда они получены во время выполнения. Если вам нужна дополнительная информация, вы можете посмотреть официальную демо-версию или репозиторий. Вы также можете оставить отзыв!
Автор: Alex Jover Morales
Источник: //alligator.io/
Редакция: Команда webformyself.
