Vue引入外部js变量和方法

外部js文件

//定义变量或常量
const name ='张三'
//定义方法test
function test () {
    
    
  const text="Hello World"
  alert(text)
}
//导出设置使得Vue可引入,关键
export {
    
    
	test,
	name
}

Vue组件

<template>
  <div>
    {
    
    {
    
    name}}
    <button @click='handle'>点击</button>
  </div>
</template>
<script>
import {
    
     name, test } from '../assets/js/config.js'   // 引入变量和方法
export default {
    
    
  data () {
    
    
    return {
    
    
      name       // 直接引用变量
    }
  },
  methods: {
    
    
    handle () {
    
    
      test()    // 直接引用方法
    }
  }
}
</script>

结果如下,组件中可以获取到js文件中的变量和方法
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42164004/article/details/108662277