VUE export import

目录

命名导出

导出变量

导出函数

总结

默认导出

导出变量

导出函数

总结

因为总是搞不懂export和Import什么时候需要加{}，什么时候不用，所以自己测试了一下，以下是总结。

需不需要加{}取决于命名导出还是默认导出，命名导出需要加{}，默认导出可加可不加。

命名导出

导出变量

export命名导出时需要加{}，否则会报错。且import页面引入变量名/函数名需要和export的变量/函数名同名，否则都是undefined。

const testnum = 1;

function testFun(){
    console.log(`test`);
}

export { testnum };

命名导出变量，Import时没加{}，打印的是undefined

<script>
import testnum from './t1.js';

export default{
    
    created(){
        console.log(testnum);
    }
}
</script>

import加{}，打印正常

<script>
import {testnum} from './t1.js';

export default{
    
    created(){
        console.log(testnum);
    }
}
</script>

导出函数

命名导出需要加{}，否则会报错。

const testnum = 1;

function testFun(){
    console.log(`test`);
}

export {testFun};

测试import，未加{}打印值为undefined。

<script>
import testFun from './t1.js';

export default{
    
    created(){
        console.log(testFun);
    }
}
</script>

import {} 打印正常。

<script>
import {testFun} from './t1.js';

export default{
    
    created(){
        console.log(testFun);
    }
}
</script>

总结

命名导出的情况下，不管是export还是import，都需要加{}获取。

默认导出

导出变量

导出语法加{}和不加{}都不会报错。

不加{}的情况下，import不加{}可正常获取。

<script>
import testnum from './t1.js';

export default{
    
    created(){
        console.log(testnum);
    }
}
</script>

不加{}的情况下，import加{}获取的值为undefined。

<script>
import {testnum} from './t1.js';

export default{
    
    created(){
        console.log(testnum);
    }
}
</script>

加{}的情况下，import加{}不可获取，不加{}，获得的是对象。

<script>
import testnum from './t1.js';

export default{
    
    created(){
        console.log(testnum);
    }
}
</script>

导出函数

导出函数的规律和导出变量一样。

export可以加{}，也可以不加{}。

不加{}的情况下，import同样不加{}才能获取。且获得的是变量/函数本身。

加{}的情况下，import不加{}才能获取，且获得的是包含变量/函数的对象。

总结

默认导出的情况下，export可加{}可不加。

export不加{}的情况下，import的获取语法与export相同，也不加{}，且获得的是变量/函数本身。

export加{}的情况下，import的获取语法相反，不能加{}，且获得的变量是包含变量/函数的对象。