Vue2通过this直接调用引入的js全局变量以及函数

GXEXAX

于 2022-11-25 15:36:43 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端开发语言 vue.js

本文链接：https://blog.youkuaiyun.com/GXEXAX/article/details/128038540

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过script.js创建全局变量和函数，并将其导出供组件间直接使用。步骤包括新建文件、导出对象、引入并注入原型，以便在Vue组件中无缝调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先在src下新建一个文件夹和对应js文件，我这里创建了script.js文件

2.编写对应全局变量以及全局函数并默认导出

export default {
    val: '这是一个变量',
    func () {
        console.log('这是一个函数')
    }
}

3.在main.js里引入对应文件，并遍历放入Vue原型中

import Vue from 'vue'
import App from './App'
import router from './router'
// 此处引入script
import script from './script/script'

// 遍历script，将其中的对象放入Vue原型中
for (let s in script) {
  Vue.prototype[s] = script[s]
}

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.之后在任意vue文件中就可以用this直接调用了

<script>
export default {
  name: '...',
  data () {
    return {}
  },
  methods: {
    testScript () {
      console.log(this.val)
      this.func()
    }
  }
}
</script>