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

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

最近、 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-構文のように、サーバーからのテンプレートのような場合に、その場でテンプレートを解釈する問題。実行時に受信される場所。

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

涼しくしてください🦄

getdocs

13036