外部 JS スクリプトを VueJS コンポーネントに動的に含める方法

VueJS コンポーネントに外部 JS スクリプトを含める

VueJS アプリケーション内で、外部スクリプトを特定のコンポーネントにシームレスに統合できます。これは、アプリケーションの初期化時ではなく、必要に応じてスクリプトをロードする場合に特に便利です。たとえば、支払いゲートウェイ スクリプトは、ユーザーが支払い関連コンポーネントに移動する場合にのみ必要になる場合があります。

ソリューション

外部スクリプトを VueJS コンポーネントに動的に追加するには、次のようにします。 Mounted() ライフサイクル フックを利用します。このフック内:

1. スクリプト要素を作成し、その src 属性を目的のスクリプト ファイルを指すように設定します。
2. 新しく作成したスクリプト要素をドキュメントの に追加します。

例

Google Recaptcha スクリプトを必要とするコンポーネントを考えてみましょう:

<code class="html"><template>
  ... your component's HTML
</template>

<script>
  export default {
    data() {
      return {
        ... your component's data
      };
    },
    mounted() {
      const recaptchaScript = document.createElement('script');
      recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
      document.head.appendChild(recaptchaScript);
    },
    methods: {
      ... your component's methods
    }
  };
</script></code>

このアプローチを利用すると、Recaptchaスクリプトは、コンポーネントがレンダリングされるときにのみ動的にロードされます。

追加リソース

この手法の詳細については、次のリソースを参照してください:

• [Vue コンポーネントに Script タグを含める方法](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 )

以上が外部 JS スクリプトを VueJS コンポーネントに動的に含める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。