5-4 import,export属性

一.默认 export default 匿名的方法 

这种导出的方式不需要知道变量的名字， 相当于是匿名的， 直接把开发的接口给export；
如果一个js模块文件就只有一个功能， 那么就可以使用export default导出；

1.如在App.vue文件中export导出

export default {
  name: 'App'
}

2.在main.js中导入, 然后就可以使用App.vue中的方法了

import Vue from 'vue'
import App from './App'
import router from './router'
// import {sum, minus} from './util'
// import * as util from './util'

Vue.config.productionTip = false

// console.log(`sum: ${util.sum(1, 6)}`);
// console.log(`sum: ${util.minus(10, 6)}`);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

二. 使用 export{接口} 导出接口，大括号中的接口名字为上面定义的变量，import和export是对应的；

1.util.js (export 导出2个有变量名的函数)

export let sum = (x, y) => {
    return x + y;
}

export let minus = (m, n) => {
    return m - n
}

2.main.js (import 导入util.js

第一种方法使用{}

import {sum, minus} from './util'
console.log(`sum: ${sum(1, 6)}`);
console.log(`sum: ${minus(10, 6)}`);

第二种方法使用 * as

import * as util from './util'
console.log(`sum: ${util.sum(1, 6)}`);
console.log(`sum: ${util.minus(10, 6)}`);

 

转载于:https://www.cnblogs.com/alantao/p/8335514.html