如果在指定组件中引入外部js?

项目中用到了一个第三方的客服服务,他们提供的是一个外部js链接,需要在<body></body>中引入
我们只需要在某些页面中进行该服务的使用,如果直接在index.html中引入了,那么每个页面就有了客服的图标了
目前我通过以下方式在需要客服功能的单个.vue文件中引入js

// 先定义这么个组件
export default {
 components: {
  'remote-js': {
  render(createElement) {
   return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
  },
  props: {
   src: { type: String, required: true },
  },
 },
 },
}
// 在需要的地方这样调用
<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">
</remote-js>

问题就在于: 在指定页面加载外部js成功后,到其他页面(没有引入remote-js)去,那个客服图标还是在的。

请问有人遇到过同样的问题吗?或者可以指点一下大概哪里的问题呢?

阅读 2.6k
1 个回答

现在你只需要在你引入外部js的组件的destroyed生命周期钩子函数里面把这个外部js删了就好了,这样只要离开这个组件了这个js就没了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题