最近、 v-runtime-template をリリースしました。これは、実行時にVue.jsテンプレートを簡単にコンパイルおよび解釈できるVueコンポーネントです。 v-html
-APIのように。
サーバーからテンプレートを受け取らなければならないプロジェクトで問題が発生しました。 なぜあなたは言うのですか? さて、ユーザーが何らかのインターフェースを構築できる通常のドラッグアンドドロップインターフェースを想像してみてください。 これは、フロントエンドに実装されたコンポーネントを使用するVueテンプレートコードとして保存されます。 フロントエンドはAPI呼び出しを行い、後でそのコンテンツにアクセスしてページのセクションを埋めます。
おそらく、プレーンHTMLを使用してそれを行ったことがあるでしょう。 v-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>
了解しました。それはかなり正当なようです。 The 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
場に出る。 と同様のAPIを提供します v-html
ただし、特定の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
また methods
. したがって、親からアクセス可能なリアクティブデータを持つ動的テンプレートを作成できます。
たとえば、次のテンプレートはアクセスできます 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
-構文のように、サーバーからのテンプレートのような場合に、その場でテンプレートを解釈する問題。 実行時に受信される場所。
さらに詳しい情報が必要な場合は、公式のデモまたはリポジトリを確認してください。 フィードバックはお気軽にどうぞ!
涼しくしてください🦄