export
export function listFun1() {
let list = [
{
id: 1,
name: "张三",
},
{
id: 2,
name: "李四",
},
{
id: 3,
name: "小明",
},
];
return list;
}
export function listFun2() {
let list = [
{
id: 1,
name: "小红",
},
{
id: 2,
name: "小黄",
},
{
id: 3,
name: "小绿",
},
];
return list;
}
在vue中使用
<template>
<div class="contentClass"></div>
</template>
<script>
import { listFun1, listFun1} from "./charts";
export default {
name: "list",
components: {},
data() {
return {}
},
computed: {},
watch: {},
methods: {},
mounted() {},
created() {
console.log(listFun1());
console.log(listFun2());
},
};
</script>
结果.png
1、export 只是 向外面暴露一个函数，在 vue 中引入该 js 时，要指定引用的具体函数名。
2、不可以使用 import test1 from "./charts" 引用 这样出来的结果是undefined
3、import { listFun1, listFun1} from "./charts" ，花括号里面指定的是 js 的具体函数，获取出来的数据，就是该函数 return 出来的数据。
export default
export default {
list1: [
{
id: 1,
name: "张三",
},
{
id: 2,
name: "李四",
},
{
id: 3,
name: "小明",
},
],
list2: [
{
id: 1,
name: "小红",
},
{
id: 2,
name: "小黄",
},
{
id: 3,
name: "小绿",
},
],
FunList: () => {
return '123456'
}
// 后续加的
OptionFun: (echartData) => {
const option = {
color: ['#e97008', '#59eaff', '#e4c017', '#f12802'],
}
return option
}
}
在vue中使用
<template>
<div class="contentClass"></div>
</template>
<script>
import chartsRisk from "./charts";
export default {
name: "list",
components: {},
data() {
return {}
},
computed: {},
watch: {},
methods: {},
mounted() {},
created() {
console.log(chartsRisk);
console.log(chartsRisk.list1);
console.log(chartsRisk.list2);
console.log(chartsRisk.FunList());
// 后续加的
console.log(chartsRisk.OptionFun(data));
},
};
</script>
结果.png
1、export default 默认导出一个对象，对象的每一项可以是数组、函数
2、一个js 文件只能有一个 export default
3、在 vue 中引入该 js 时，import charts from "./charts"
4、访问对象的属性或调用函数，直接chartsRisk.list1、chartsRisk.FunList()
后续添加-------export default
const voiceFun = {};
voiceFun.initVoice = () => {}
voiceFun.voiceBroadcast = (text) => {}
voiceFun.closeVoice = () => {}
export default voiceFun;
// 调用
import voiceFun from '@/util/voice.ts';
voiceFun.initVoice()
voiceFun.voiceBroadcast ()
voiceFun.closeVoice ()
module.exports
const list1 = [
{
id: 1,
name: "张三",
},
{
id: 2,
name: "李四",
},
{
id: 3,
name: "小明",
},
]
const fun1 = function () {
return '123456'
}
const FunList = () => {
const list = [
{
id: 1,
name: "小红",
},
{
id: 2,
name: "小黄",
},
{
id: 3,
name: "小绿",
},
]
return list
}
module.exports = {
list1,
fun1,
FunList
}
// 也可以重新命名
// module.exports = {
// objlist1:list1,
// objlist2:fun1,
// };
在vue中使用
<template>
<div class="contentClass"></div>
</template>
<script>
export default {
name: "list",
components: {},
data() {
return {}
},
computed: {},
watch: {},
methods: {},
mounted() {},
created() {
const myModule = require('./charts');
console.log(myModule)
},
};
</script>
module.export 相当于集中起来导出去，导出的为一个对象
vue是运行环境是ES6 模块， module.export 是使用 CommonJS 模块系统，这是 Node.js 默认的模块系统，
所以使用module.export就得兼容Node.js。
