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

最新推荐文章于 2024-03-08 09:57:12 发布

原创最新推荐文章于 2024-03-08 09:57:12 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #vue.js

前端专栏收录该内容

2 篇文章

订阅专栏

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

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>