关于如何在 vue 中使用 js 数据和方法 export、export default、module.exports

最新推荐文章于 2024-08-23 14:49:37 发布

原创最新推荐文章于 2024-08-23 14:49:37 发布 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中的export、export default和module.exports三种导出方式，以及在Vue中如何导入和使用这些导出的功能。export default用于单一默认导出，而export则可以导出多个函数或变量。在Vue组件中，根据导出方式的不同，引入时的语法也有所区别。module.exports则是CommonJS模块中导出的方法，允许导出一个包含多个属性的对象。在实际开发中，理解这些模块系统对于有效组织和复用代码至关重要。

export

在 js 中

export function test1Fn1() {
  let list = [
    {
      id: 1,
      name: "1111",
    },
    {
      id: 2,
      name: "2222",
    },
    {
      id: 3,
      name: "3333",
    },
  ];
  return list;
}
export function test1Fn2() {
  let list = [
    {
      id: 1,
      age: 20,
    },
    {
      id: 2,
      age: 21,
    },
    {
      id: 3,
      age: 22,
    },
  ];
  return list;
}

在 vue 中

<template>
  <div class="container"></div>
</template>
<script>
import test1 from "./Test1";
import { test1Fn1, test1Fn2 } from "./Test1";
export default {
  name: "test", // Test
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      list: test1Fn1(),
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log(test1);
    console.log(this.list);
    console.log(test1Fn2());
  },
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>

在这里插入图片描述

export 只是向外面暴露一个一个函数，在 vue 中引入该 js 时，要指定引用的具体函数名。
所以不可以使用 import test1 from "./Test1" 引用
而是 import { test1Fn1, test1Fn2 } from "./Test1"
花括号里面，是 js 的函数，获取的数据，就是该函数 return 出来的数据。

export default

在 js 中

export default {
  list1: [
    {
      id: 1,
      name: "1111",
    },
    {
      id: 2,
      name: "2222",
    },
    {
      id: 3,
      name: "3333",
    },
  ],
  list2: [
    {
      id: 1,
      age: 20,
    },
    {
      id: 2,
      age: 21,
    },
    {
      id: 3,
      age: 22,
    },
  ],
   test2Fn1: () => {
    return "1234";
  },
};

在 vue 中

<script>
import test2 from "./Test2";
export default {
  name: "test", // Test
  mixins: [],
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {
    console.log(test2);
    console.log(test2.list1);
    console.log(test2.list2);
    console.log(test2.test2Fn1());
  },
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>

在这里插入图片描述

export default 默认导出一个对象，对象的每一项可以是数组函数等。一个js 只能有一个 export default
在 vue 中引入该 js 时，import test2 from "./Test2";
访问对象的属性或调用函数，直接 test2.list1， test2.test2Fn1()

module.exports

在 js 中

const fn1 = () => {
  const list1 = [
    {
      id: 1,
      name: "1111",
    },
    {
      id: 2,
      name: "2222",
    },
    {
      id: 3,
      name: "3333",
    },
  ];
  return list1;
};
const fn2 = function() {
  const list2 = [
    {
      id: 1,
      age: 20,
    },
    {
      id: 2,
      age: 21,
    },
    {
      id: 3,
      age: 22,
    },
  ];
  return list2;
};
module.exports = {
  test3Fn1: fn1,
  test3Fn2: fn2,
};
// 也可以不重新命名
// module.exports = {
//   fn1,
//   fn2,
// };

在 vue 中

<script>
import test3 from "./Test3";
export default {
  name: "test", // Test
  mixins: [],
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {
    console.log(test3);
    console.log(test3.test3Fn1());
    console.log(test3.test3Fn2());
  },
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>