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-comComponent-fe10940af9e8 )

위 내용은 VueJS 구성 요소에 외부 JS 스크립트를 동적으로 포함하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!