v-runtime-templateを使用してVue.jsテンプレートをオンザフライでコンパイルします

投稿日: 2022-04-20 2022-04-20
タグ: 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、または[ X153X]。したがって、親からアクセス可能なリアクティブデータを持つ動的テンプレートを作成できます。

たとえば、次のテンプレートは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のような構文を使用して、サーバーからのテンプレートなどの場合にテンプレートをその場で解釈する問題を簡単に解決するために作成されました。実行時に受信される場所。

さらに詳しい情報が必要な場合は、公式のデモまたはリポジトリを確認してください。フィードバックはお気軽にどうぞ！

涼しくしてください🦄

getdocs

9427