What is export default in JavaScript and vue.js

https://stackoverflow.com/questions/48727863/vue-export-default-vs-new-vue
vue-export-default-vs-vue-new
vue-export-default-vs-new-vue

What is export default in JavaScript **
The export statement is used when creating JavaScript modules to export objects, functions, variables from the module so they can be used by other programs with the help of the import statements. There are two types of exports. One is Named Exports and other is Default Exports.
**Named Exports: Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

// Exporting individual features

export var name1 = …, name2 = …, …, nameN;

// also let, const

// Export list

export { name1, name2, …, nameN };

//Exporting everything at once

export { object, number, x, y, boolean, string }

// Renaming exports

export { variable1 as name1, variable2 as name2, …, nameN };

// export features declared earlier

export { myFunction, myVariable };

//file math.js

function square(x) {
  return x * x;
}
function cube(x) {
  return x * x * x;
}
export { square, cube };

//while importing square function in test.js

import { square, cube } from './math;
console.log(square(8)) //64
console.log(cube(8)) //512

Output:

64
512
Default Exports: Default exports are useful to export only a single object, function, variable. During the import, we can use any name to import.

// file module.js
var x=4;
export default x;

// test.js
// while importing x in test.js
import y from './module';
// note that y is used import x instead of
// import x, because x was default export
console.log(y);       
// output will be 4

Output

sing Named and Default Exports at the same time: It is possible to use Named and Default exports in the same file. It means both will be imported in the same file. Example:

//module.js

var x=2;
const y=4;
function fun() {
   return "This a default export."
}
function square(x) {
  return x * x;
}
export { fun as default, x, y, square };

Vue export default vs Vue new

Using Vue new:

You can create a Vue instance by calling new Vue(). It is basically a JavaScript Object. The syntax for using it is shown below:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

JavaScript
This refers to the root Vue instance from which the rest of the application comes down. and it will work with the HTML document. See the example below:

Using export default:

Another way is declaring a component. In Vue you can create a component and register it. You may also reuse it later if you needed. Let’s see an example of creating a single component named “TestOne” and reusing it into another component named “TestTwo” in the below section:

// TestOne.vue

export default {
    name: 'TestOne',
    data () {
      return {}
    }
}

JavaScript
Here, we have defined single component and let’s use it into another component:

// TestTwo.vue

<template>
  <TestOne/>
</template>
<script>
  import TestOne from './components/TestOne.vue'
  export default {
                name : 'TestTwo'
    components: {
      TestOne
    }
    data () {
      return {}
     }
      ----
  }
</script>

JavaScript
You can see that we can reuse the component “TestOne” in another component named “TestTwo” by using export default. You can use export-default for creating local registration for the Vue component.

Debug School

What is export default in JavaScript and vue.js

Vue export default vs Vue new

Top comments (0)