您的位置: 首页  >  IT文章  >  export 和export default的使用和区别

export 和export default的使用和区别

分类: IT文章 • 2024-01-02 12:05:05

我主要是从vue项目使用常量和方法角度取分析，从具体例子出发

（在js中也可以导入其他js中的数据和方法）

涉及到HelloWord.vue和common.js两个文件

一、使用export导出变量和方法

common.js

// 导出变量(方式1)
const myName = '小明'
const myEge = '18'
export {
  myName as myname, // 导入时只能myname，否则报错
  myEge
}
// 导出变量(方式2)
export const myAdd = 'beijing'

// 导出方法(方式1)
const getMyEge = () => {
  return myEge
}
const getMyAdd = () => {
  return myAdd
}
export {
  getMyEge,
  getMyAdd
}
// 导出方法(方式2)
export function getMyName () {
  return myName
}

 HelloWord.vue

<template>
  <div class="hello">
      <div>{{myname}}</div><!--未定义直接使用会报错，"myname" is not defined，必须在data或者computed中定义-->
      <div>{{myEge}}</div>
      <div>{{myadd}}</div>
  </div>
</template>

<script>
import {myname, myEge, myAdd as myadd, getMyName, getMyEge} from '@/utils/common'
export default {
  name: 'HelloWorld',
  data () {
    return {
      myEge: myEge
    }
  },
  computed: {
    myadd () {
      return myadd
    }
  },
  mounted () {
    console.log(myname)
    console.log(myadd)
    console.log(getMyName())
    console.log(getMyName) // 执行方法必须后加括号，否则打印出来是ƒ getMyName() {eturn myName;}
    console.log(getMyEge())
  }
}
</script>

 先就export的使用总结一下下

在common.js中

1.export 导出变量和方法都有两种方式

　　方式1：先定义再整体导出  export {}

　　方式2：一段代码直接导出一个，如 export const a=1

2.使用方式1导出时是可以改变方法名或者变量名的,as英文翻译'作为'，那么下面的示例就是，将myName 作为myname导出，后期在导入时就要使用myname，否则就会报错

export {myName as myname}

在HelloWorld中

1.导入变量和方法

import {myname, myEge, myAdd as myadd, getMyName, getMyEge} from '@/utils/common'

此处的myAdd as myadd同样是将myAdd改成了myadd，使用时用myadd，方法名也是可以改的

2.导入的myname不能在{{myname}}使用，会报错"myname" is not defined，需要在data或computed中定义赋值，

在js中可以直接使用console.log(myname)

3.console.log(getMyName) // 执行方法必须后加括号，否则打印出来是ƒ getMyName() {eturn myName;}

二、使用export default导出变量和方法

1.一个js只能使用一个export default

下面代码使用两个，在运行时就会报错

// common.js
const myname = '小红'
export default myname
const myname2 = '小红'
export default myname2

2.export和export default是否可以同时出现

可以，使用不同的导入方式，可以得到export和export default相应的值

可以看以下验证示例

const myname2 = '小红1'
const myname = '小红'
const myFun = () => {
  return myname2
}
export {
  myname2,
  myname
}

export default {
  myname2,
  myname,
  myFun,
  myFun2: function () {
    return myname
  }
}
<template>
  <div class="hello">
  </div>
</template>

<script>
import myname2, {myname2 as myname1} from '@/utils/common1'

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  computed: {
  },
  mounted () {
    console.log(myname2)// {myname2: "小红1", myname: "小红"}
    console.log(myname2.myname2)// 小红1
    console.log(myname1)// 小红1
    console.log(myname2.myFun())// 小红1
    console.log(myname2.myFun2())// 小红
  }
}
</script>

三、export 和export default区别

1.export default 在同一个模块中只能出现一次，export可以出现多次（export和export default 可同时使用）

2.导入方式不同，export导入需要加{}

3.export default const str = 'hello world'会报错，export default后不能跟let const 等

相关推荐