vue中模块的导入与导出

目录

导入模块：import 

导出模块：export

1.第一种方法（一个一个的导入导出）

2.第二种方法（多个导出）

3.第三种方法 * as 全部导出(将使用内容全部导出)

---

导入模块：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>

打印结果