如何仅在某些组件中加载本地JavaScript文件

时间:2019-05-28 22:05:42

标签: vue.js vuejs2 vue-component

我有一个JavaScript文件,安装后仅想包含在一个组件中。例如,此JavaScript文件(称为dashboard.js)仅应在Dashboard.vue组件处于活动状态并已安装时运行。

我尝试将代码粘贴在mount()中,但这将无法工作,因为代码依赖于this是窗口,而不是Vue实例。我也尝试将脚本附加到已挂载函数的document.head中,但这似乎是一个很大的漏洞,而且我知道必须有一种更好的方法来实现此目的。

//Dashboard.vue
<template>
<div>
Dashboard content here
</div>
</template>
<script>
export default {
    mounted() {
      //code that relies on this being the window object here (jQuery stuff)
    }
}
</script>


//dashboard.js
$(function() {
  $div = $('div');
  $div.on('click', function() {
    //do stuff
  });
});

我希望仅在安装组件时加载并调用此dashboard.js本地脚本。

1 个答案:

答案 0 :(得分:0)

您可以将该脚本导入组件:

bks <- bks[, data.frame(embed(unlist(.SD),2)[,2:1]), by=prd]
bks[, grp := seq_len(.N), by=prd]

#   prd   X1   X2 grp
#1:   1 -5.0 -1.0   1
#2:   1 -1.0  0.0   2
#3:   1  0.0  1.0   3
#4:   1  1.0  5.0   4
#5:   2 -5.0  0.0   1
#6:   2  0.0  0.5   2
#7:   2  0.5  3.0   3
#8:   2  3.0  5.0   4

data[bks, on=c("prd1"="prd","varbl>=X1","varbl<X2"), grp := i.grp]

#    id prd1 varbl  grp
# 1:  1    1  -1.6    1
# 2:  2    1  -0.7    2
# 3:  3    1   0.1    3
# 4:  4    1   1.2    4
# 5:  5    1  -0.5    2
# 6:  1    2  -0.8    1
# 7:  2    2   0.4    2
# 8:  3    2   1.2    3
# 9:  4    2   1.9    3
#10:  5    2   4.0    4

然后在dashboard.js中导入jQuery

// Dashboard.vue
import * as dashboard from "./dashboard";