vue中 export / import 的使用

在vue开发的过程中,常用到暴露和引入,常见的暴露与引入方式是通过export暴露通过import引入,下面分别讲解一下:分别暴露、统一暴露、默认暴露的应用场景和使用方法

一、分别暴露
应用场景:用于一个文件内暴露多个属性的场景,分别暴露,每一个属性都进行暴露

//暴露
export  const a =()=>{
    console.log(999);
} 
export  const b = 2
export  const c = 1 
//引入
import {a,b,c} from '@/api/api'
//使用:可直接通过a,b,c获取
created(){
    a()
    console.log(b,c);
  }

二、统一暴露
应用场景:用于一个文件内暴露多个属性的场景,统一进行暴露

//暴露
const a =()=>{
    console.log(999);
} 
const b = 2
const c = 1 
export{a,b,c}
//引入
import {a,b,c} from '@/api/api'
//使用
created(){
    a()
    console.log(b,c);
  }

三、默认暴露
应用场景:对于只需要暴露一个属性的时候使用

//暴露
const a =(data)=>{
    return data+1
} 
 
export default a
//引入
import a from '@/api/api'
 
//使用
created(){
    console.log(a(5));
  }

四、简单说明
主要用于封装一些方法,然后进行引入,简化代码,提高代码复用率

posted @ 2022-08-09 08:37  寒冷的雨呢  阅读(590)  评论(0编辑  收藏  举报