目录
导入模块:import
导出模块:export
1.第一种方法(一个一个的导入导出)
新建一个index.js ,在index.js 中导出
//一个一个的单个导出
export var arr = ['a', 'b', 'c', 'd'] //导出数组
export var stringName = 'I is xuqian' //导出字符串
export var obj = { name: 'xq', age: '18', id: 1 } //导出对象
export function way() { //导出方法
return '方法'
}
在需要导入的页面中
<template>
<div>
<div>{{Arr}}</div>
<div>{{stringName}}</div>
<div>{{Obj}}</div>
<div>{{Way}}</div>
</div>
</template>
<script>
import { arr, stringName, obj, way } from "../../utils/index.js"; //把数据导入(一个个的单个导入)
export default {
data() {
return {
Arr: arr, //数组
stringName: stringName, //字符串
Obj: obj, //对象
Way:way() //方法
};
},
mounted() {
console.log(this.Arr);
console.log(this.stringName);
console.log(this.Obj);
console.log(this.Way)
},
};
</script>
打印结果
2.第二种方法(多个导出)
新建一个index.js ,在index.js 中导出
//多个导出
var arr = ['a', 'b', 'c', 'd'] //导出数组
var stringName = 'I is xuqian' //导出字符串
var obj = { name: 'xq', age: '18', id: 1 } //导出对象
function way() { //导出方法
return '方法'
}
export default {
arr, stringName, obj, way
}
在需要导入的页面中
<template>
<div>
<div>{{ arr }}</div>
<div>{{ stringName }}</div>
<div>{{ obj }}</div>
<div>{{ way }}</div>
</div>
</template>
<script>
import data from "./index.js";
export default {
data() {
return {
arr: data.arr,
stringName: data.stringName,
obj: data.obj,
way: data.way(),
};
},
mounted() {
console.log(this.arr);
console.log(this.stringName);
console.log(this.obj);
console.log(this.way);
},
};
</script>
打印结果
3.第三种方法 * as 全部导出(将使用内容全部导出)
新建一个index.js ,在index.js 中导出
export function sexFilter(val) {
switch (val) {
case 0:
return '女';
case 1:
return '男';
default:
return val;
}
}
export function priceFilter(val) {
return '¥' + val.toFixed(2)
}
在需要导入的页面中
<template>
<div>
</div>
</template>
<script>
import * as xq from "./index.js";
export default {
data() {
return {};
},
mounted() {
console.log(xq);
},
};
</script>
打印结果