vue引入链接形式（网站）的js文件

最新推荐文章于 2024-07-16 09:48:08 发布

阿南好难難难

最新推荐文章于 2024-07-16 09:48:08 发布

阅读量8.9k

点赞数 5

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/linan996/article/details/120918876

版权

本文介绍了如何在Vue应用中创建一个自定义组件`remote-js`，该组件用于动态加载外部JavaScript库，例如在示例中引用了three.js。通过设置`src`属性指定JS文件的URL，成功实现DOM创建并确保插件正常工作，从而实现动态引入资源。

摘要由CSDN通过智能技术生成

创建script标签的方法（定义自定义组件）

代码如下（示例）：

export default {
  components: {
    tabVue,
    'remote-js': {
      render (createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src } });
      },
      props: {
        src: { type: String, required: true },
      },
    },
  },

}

引用组件：
这里引用的是three.js这个外部js

 <remote-js src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/71/three.min.js"></remote-js>

src中使用的既是链接形式的js文件
查看效果：

在这里插入图片描述

dom创建完成并且插件使用正常
非常nice！！！

阿南好难難难

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue引入链接形式（网站）的js文件

创建script标签的方法（定义自定义组件）代码如下（示例）：export default { components: { tabVue, 'remote-js': { render (createElement) { return createElement('script', { attrs: { type: 'text/javascript', src: this.src } }); }, props: {
复制链接

扫一扫