导入和导出的两种方法

最新推荐文章于 2023-04-26 10:45:11 发布

大坤...

最新推荐文章于 2023-04-26 10:45:11 发布

阅读量929

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/red_HTML/article/details/130304806

版权

1. commonJS 导出和导入

设置好方法使用 module.exports 进行导出

function fn(fun) {
  console.log(`这是一个${fun}函数`);
}

const jian = (j) => {
  console.log(`这是一个${j}函数`);
};

module.exports = {
  fn: fn,
  jian: jian,
};

在vue文件里面使用 let log = require('../utils/commonjs') 进行导出赋值使用

<template>
    <div>
        <button @click="clickFn">click</button>
        <button @click="clickJian">click</button>
    </div>
</template>
<script>
let log = require('../utils/commonjs')
export default {
    data() {
        return {

        }
    },
    methods: {
        clickFn() {
            log.fn('fn')
        },
        clickJian() {
            log.jian('jian')
        }
    }
}
</script>

2.使用ES6进行导出和导入

导出方法直接使用 export 进行导出或者使用 export default 进行默认导出

// 按需到处
export function black(colorur) {
  console.log(`平时喜欢${colorur}`);
}

导入使用方法使用 import { black } from '../utils/Es6' 进行导入来使用

<template>
    <div>
        <button @click="clickBlack">click</button>
    </div>
</template>
<script>
import { black } from '../utils/Es6'
export default {
    data() {
        return {

        }
    },
    methods: {
        clickBlack() {
            black('黑色的主题')
        }
    }
}
</script>