如何在VueJS元件中動態包含外部JS腳本？

在 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 元件上包含腳本標籤] (https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 )

以上是如何在VueJS元件中動態包含外部JS腳本？的詳細內容。更多資訊請關注PHP中文網其他相關文章！