Vue引入外部js文件中的变量，方法

时间：2025-04-03 07:27:34

写法一：

vue文件

<template>
    <div class="index">
        <div>{{zuopin}}</div>
        <h2>{{}}</h2>
        <h2>{{}}</h2>
        <div class="box" v-for="item in info" :key="">
            <h2>{{}}</h2>
            <p>{{}}</p>
        </div>
    </div>
</template>
<script>
import {box_Data} from "@/assets/js/indexdata";
import {box2_data} from "@/assets/js/indexdata";
    export default{
        name:'index',
        data(){
            return{
                zuopin:'作品集',
                info:box2_data,
                content:box_Data
            }
        },
    }
</script>

文件

const box_Data = {
    name:`作者名称`,
    title:`作品名称`,
}
const box2_data = [
    {
        id:`1`,
        name:`史铁生`,
        title:`《我与地坛》`,
    },
    {
        id:`2`,
        name:`路遥`,
        title:`《平凡的世界》`
    }
]
export {
    box_Data,
    box2_data
}

写法二：

文件用于存放需要的常量 使用export const 进行声明

export const textLength = 30;
export const areaLength = 500;
export const phoneNum =  /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
export const email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

引入

import * as pattern from './pro'
  created() {
    ('pattern', pattern)
  },

写法三：

//定义变量或常量
const URL_CONFIG = {
  URL: '/firstlt0217/article/details/107863081',
};
const URL_CONFIG2 = {
  URL: '/firstlt0217/article/details/107863081',
};
//定义方法test
function test () {
  const url = '/firstlt0217/article/details/107863081';
  (url);
  return url;
}
//导出设置使得Vue可引入，关键
export{
  URL_CONFIG,
  URL_CONFIG2,
  test
}

vue文件中引入

<template>
  <div>
    <p>url:{{url}}</p>
    <button v-on:click="testvue ">显示URL</button>
    <p>url2:{{url2}}</p>
  </div>
</template>
<script>
  import { URL_CONFIG,test } from './js/'  //引入
export default {
  name: 'Vuetest',
  data: function () {
    return {
      url: URL_CONFIG.URL,
      url2:""
    }
  },
  methods: {
    testvue () {
      this.url2=test()
    }
  }
}
</script>
<style scoped>
</style>

可注册为全局
Vue文件在src文件目录下，可以import…；如果在静态文件夹static目录下，可以在主页面引入
在中引入

import * as testUrl from './components/config'
=testUrl;//加载到Vue原型属性

全局变量使用

.URL_CONFIG.URL

二、export 和 export default 的区别

相同点：
1）利用export和export default关键字输出自定义独立文件（也成为一个模块）中的所有变量、方法等，
以提供外部使用。模块：即独立的文件
2）export与export default均可用于导出常量、函数、文件、模块等
不同点：
1）在一个文件或模块中，export、import可以有多个，export default仅有一个
2）通过export方式导出，在导入时要加{ }，export default则不需要
	(1) 输出单个值，使用export default
	(2) 输出多个值，使用export
	(3) export default与普通的export不要同时使用
	出现问题：当使用export default {a, b, c, d} 容易造成嵌套多层；
	结果：{a: {a, b, c, d}, b:{a, b, c, d}, c:{a, b, c, d}, d:{a, b, c, d}} //error

export：

1）export命令对外接口的名称是一定的、不变的；
2）import命令从模块导入的变量名与被导入模块对外接口的名称相同；即大括号里面的变量名，
必须与被导入模块（）对外接口的名称相同；
3）如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
	import { name as newname } from './';

export default：

1）export default命令，为模块指定默认输出。即一个模块只能有一个默认输出，也就是一个
模块export default命令只能使用一次，因此export default命令是唯一的，import命令后面
也就不用再加大括号。
2）export default命令对外输出的变量名可以是任意的，即其他模块加载该模块时，
import命令可以为该匿名函数指定任意名字。注意这时import命令后面，不使用大括号。

写法四：

function nameJoin(name) {
  return `you name id ${name}`;
}
function test() {
  return 'test from ';
}
 
function test2() {
  return 'test2';
}
function test3() {
  return 'test3';
}
 
const PI = 3.14;
// 默认导出（每个模块只能有一个）
export default {
  nameJoin,
  test,
  PI
};
// 直接导出
export function funName() {
  return 'you default name is FunName';
}
// 导出列表
export { test2, test3 };

<template>
  <div>
    <p>import中的常量使用:{{ getPI() }}</p>
    <p>使用import导入的方法：{{ test2() }}</p>
  </div>
</template>
<script>
// 通过import导入常量或方法
import comm, { test2, test3 } from './';
export default {
  data() {
    return {};
  },
  mounted() {
    //直接使用import导入的方法
    ('test', ());
    ('test2', test2());
  },
  methods: {
    // 在methods中申明的import方法，可以tmplate中直接使用
    test2,
    // 通过方法可以直接使用import引入的方法
    getPI() {
      return ;
    }
  }
};
</script>
<style lang="scss" scoped></style>

// 导入整个模块的内容
import * as comm from './';
// 导入单个接口 
import {test2} from './';
// 导入多个接口 
import {test2,test3} from './';
// 重命名接口
import {test2 as newTest,test3} from './';

相关文章