export,import,export default用法

用法1、export {} 和 import{} from ‘…/helpers’
const test_name = ‘this is test_name’;
function say_name(){
console.log(test_name )
}
export {test_name,say_name}

//vue文件
import { test_name, say_name } from ‘…/helpers’
//import {test_name as test_new_name,say_name} from ‘…/helpers’ //另一种引入方法
export default {
created(){
console.log(test_name) //输出结果this is test_name
//console.log(test_new_name) //输出结果this is test_name
say_name() //输出结果this is test_name
}
}

用法2、export {} 和 import * as test from ‘…/helpers’
const test_name = ‘this is test_name’;
function say_name(){
console.log(test_name )
}
export {test_name,say_name}

//vue文件
import * as test from ‘…/helpers’
export default {
created(){
console.log(test.test_name) //输出结果this is test_name
test.say_name() //输出结果this is test_name
}
}

用法3、export * from用来引入整个模块里面的所有内容
文件内容
index.js内容:export * from './helpersone’
helpersone.js内容:
const test_name = ‘this is test_name’;
function say_name(){
console.log(test_name )
}
export {test_name,say_name}

import 引入和前面方法一样( import { test_name, say_name } from ‘…/helpers’,import {test_name as test_new_name,say_name} from ‘…/helpers’ , import * as test from ‘…/helpers’)
用法4、export default
helpers.js内容:
const test_name = ‘this is test_name’;
function say_name(){
console.log(test_name )
}
export default {test_name,say_name}

vue 文件
import helper form ‘…/helpers’
export default {
created(){
console.log(helper.test_name) //输出结果this is test_name
helper.say_name() //输出结果this is test_name
}
}***
用法5、export 其他导出方法
export {person1,person2}
export {name1 as newname1,name2 as newname2,nameN}
export const name1=‘小明’,name2=‘小红’
export * from ‘…/helpers’,
export {person1,person2} from ‘…/helpers’
export {name1 as newname1,name2 as newname2,nameN} from ‘…/helpers’
export function(){}

猜你喜欢

转载自blog.csdn.net/m0_37715518/article/details/89183840