The first thing to know export,import ,export default What is it?

ES6 The module has two main functions :export and import
export For external output of this module ( A file can be understood as a module ) Variable interface
import Used to load another containing in one module export Module of interface .
That is to say, using export After the command defines the external interface of the module , other JS The file can be passed import Command to load this module ( file ). These are all ES6 Grammar of .

export and import( Export one import one )

One a.js The file has the following code :
export var name=" Li Si ";
References in other documents are as follows :
import { name } from "/.a.js" // Fill in the path according to your actual situation export default { data () { return
{ } }, created:function(){ alert(name)// It can pop up “ Li Si ” } }
The above example is to export the writing method of a single variable , If you are exporting multiple variables, you should follow the method below , Wrap curly braces around variables to be exported :
var name1=" Li Si "; var name2=" Zhang San "; export { name1 ,name2 }
It is quoted in other documents as follows :
import { name1 , name2 } from "/.a.js" // Fill in the path according to your actual situation export default { data ()
{return { } }, created:function(){ alert(name1)// It can pop up “ Li Si ” alert(name2)//
It can pop up “ Zhang San ” } }
What if the exported function is a function , How to use it , It's the same , as follows
function add(x,y){ alert(x*y) // Think about it if it's a return value like : return x-y, How to reference the function below } export
{ add }
It is quoted in other documents as follows :
import { add } from "/.a.js" // Fill in the path according to your actual situation export default { data () { return
{ } }, created:function(){ add(4,6) // Pop it out 24 } }
export And export default


After reading the above examples , You must know how to use it export,import, If you still don't understand, you can try it yourself . It says export and import, however export Follow export
default What's the difference ? as follows :

1,export And export default Can be used to export constants , function , file , Modules, etc
2, You can use the import+( constant | function | file | modular ) How to name , Import it , So that it can be used
3, In a file or module ,export,import There can be multiple ,export default Only one
4, adopt export Method export , Add when importing { },export default No

In this way, many times export And export default Can achieve the same goal , But there are some differences in usage . Pay attention to Article 4 , adopt export Method export , Add when importing {
},export default No . use export default command , Specify the default output for the module , This eliminates the need to know the variable name of the module to be loaded .
var name=" Li Si "; export { name } //import { name } from "/.a.js" It can be written as : var
name=" Li Si "; export default name //import name from "/.a.js" here name Braces are not required
 

Look again 3 strip , In a file or module ,export,import There can be multiple ,export default Only one , That is to say, the following code :
var name1=" Li Si "; var name2=" Zhang San "; export { name1 ,name2 }
 

It can also be written as follows , It's ok ,import Like him .
var name1=" Li Si "; var name2=" Zhang San "; export name1; export name2;