v-runtime-templateを使用してVue.jsテンプレートをオンザフライでコンパイルします
最近、 v-runtime-template をリリースしました。これは、v-html
のようなAPIを使用して、実行時にVue.jsテンプレートを簡単にコンパイルおよび解釈できるVueコンポーネントです。
サーバーからテンプレートを受け取らなければならないプロジェクトで問題が発生しました。 なぜあなたは言うのですか? さて、ユーザーが何らかのインターフェースを構築できる通常のドラッグアンドドロップインターフェースを想像してみてください。 これは、フロントエンドに実装されたコンポーネントを使用するVueテンプレートコードとして保存されます。 フロントエンドはAPI呼び出しを行い、後でそのコンテンツにアクセスしてページのセクションを埋めます。
あなたはおそらくv-html
を使用してプレーンHTMLでそれを行ったことがあるでしょう。 わかりやすくするために例を見てみましょう。
v-htmlを使用したプレーンHTMLの挿入
v-html
を使用すると、任意のDOM要素にその場でHTMLを挿入できます。
<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テンプレートコードを含める場合はどうなるでしょうか。
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-templateと入力します
そこでv-runtime-template
が登場します。 v-html
と同様のAPIを提供しますが、特定のVueテンプレートコードを解釈します。
v-runtime-template
は、使用されている親コンポーネントのコンテキストを自動的に取得し、動的コンポーネントを使用してVueをコンパイルおよびアタッチします。これは、コードのレンダリング関数ので確認できます。
前のコードを機能させるには、v-runtime-template
を使用して、次のようにテンプレートプロップを渡す必要があります。
<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
のいずれかをグローバルに登録するか、コンポーネントに追加する必要があります。
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
、または
たとえば、次のテンプレートはanimal
にアクセスできます。
export default {
data: () => ({
animal: "Crocodile",
template: `
<app-title>Howdy {{animal}}!</app-title>
`
})
// ...
または、メソッドを呼び出します。
export default {
data: () => ({
animal: "Crocodile",
template: `
<app-title>Howdy {{animal}}!</app-title>
<button @click="goToCrocoland">Go to crocoland</button>
`
}),
methods: {
goToCrocoland() {
// ...
}
}
// ...
文字列またはサーバーテンプレートがアプリケーションにこれまで以上に接続されたことはありません。
まとめ
v-runtime-template
は、v-html
のような構文を使用して、サーバーからのテンプレートなどの場合にテンプレートをその場で解釈する問題を簡単に解決するために作成されました。 実行時に受信される場所。
さらに詳しい情報が必要な場合は、公式のデモまたはリポジトリを確認してください。 フィードバックはお気軽にどうぞ!
涼しくしてください🦄