關於Vue下元件引入第三方外部Js幾種方式
阿新 • • 發佈:2018-11-26
第一種方式:利用Vue的mounted生命週期
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js';
document.body.appendChild(oScript);
第二種方式:利用Vue的createElement方法
components: { 'scriptLink': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js', }, }, ) } } }
然後通過<scriptLink></scriptLink> 引入到元件中
第三種方封裝一個remoteJs 元件
參考資料:https://vuejs.org/v2/guide/render-function.html<template> <remote-js src="//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js"></remote-js> </template> <script> export default { components: { 'remote-js': { render(createElement) { return createElement('script', {attrs: {type: 'text/javascript', src: this.src}}); }, props: { src: { type: String, required: true} } } } } </script>