Vue export(导出)、import（导入）

一、第一种方式导入/导出

js文件导出

let flag = true
let sum = function(number1,number2){
    return number1 + number2
}
// 导出方式一
export{
    flag,sum  
}

Vue实例导入js

import {flag, sum } from "../publicjs/aaa";

Vue实例使用js(使用flag和sum函数)

  if(flag){
    console.log('我要的数据')
    console.log(sum(30,50))
  }

二、第二种方式导入/导出

js文件导出

// 导出方式二
export let name = 'kobe';
export let height = 1.88;

Vue实例导入js

import {name, height } from "../publicjs/aaa";

Vue实例使用js(使用name和height)

    console.log(name)
    console.log('我的身高'+height+"米")

三、第三种方式导入/导出

1、导入/导出函数

js文件导出

// 导出方式三 (导出函数)
export function number(num1,num2){
    return num1 * num2
}

Vue实例导入js

import {number} from "../publicjs/aaa";

Vue实例使用js(使用number)

    console.log(number(30,50))

2、导入/导出类

js文件导出

// 导出方式三 (导出类)
export class Person{
    name='kobe'
    height=1.88
    run(){
        console.log('我在跑')
    }
}

Vue实例导入js

import {Person} from "../publicjs/aaa";

Vue实例使用js(使用number)

   let p = new Person()
    console.log(p.name)
    console.log(p.height)
    p.run()

四、第四种方式导入/导出 default

⚠️：1、export default在同一个模块中,不允许同时存在多个
2、某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名 这个时候就可以使用export default （见下 Vue实例导入/使用js ）

js文件导出

// 导出方式四 (default)
let address = '北京故宫博物院'
export default address

Vue实例导入js

import add from "../publicjs/aaa";

Vue实例使用js(使用add)

  console.log(add)

五、第五种方式导入/导出 通配符 *

如果我们希望某个模块中所有的信息都导入, -个个导入显然有些麻烦:
通过可以导入模块中所有的export变量
但是通常情况下我们需要给起一个别名,方便后续的使用
详见下

js文件导出

let flag = true
let sum = function(number1,number2){
    return number1 + number2
}

class Person{
    name='kobe'
    height=1.88
    run(){
        console.log('我在跑')
    }
}

export{
    flag,sum, Person
}

Vue实例导入js

import * as aa from "../publicjs/aaa";

Vue实例使用js

  if(aa.flag){
    console.log('我要的数据')
    console.log(aa.sum(30,50))
  }
    let p = new aa.Person()
    console.log(p.name)
    console.log(p.height)
    p.run()