模块化

知识点1: 通过export方式导出,在导入时要加{},export default则不需要

export

hello.js

let myAlert = function (value) {
  alert(value)
}

let myConsole = function (value) {
  console.log(value)
}

function myAdd (num1, num2) {
  console.log(num1 + num2)
}

export {myAlert, myConsole, myAdd}

hello.vue

import {myAlert, myConsole, myAdd} from '../../util/es6Test/hello'
export default {
  mounted () {
    myAlert('abc')
    myConsole('def')
    myAdd(1, 2)
  }
}

export default

hello.js

let myAlert = function (value) {
  alert(value)
}

export default myAlert

hello.vue

import myAlert from '../../util/es6Test/hello'
export default {
  mounted () {
    myAlert('abc')
  }
}





知识点2: 可以直接导入整个模块

hello.vue

import * as hello from '../../util/es6Test/hello'
export default {
  mounted () {
    hello.myAlert('abc')
    hello.myConsole('def')
    hello.myAdd(1, 2)
  }
}





知识点3: 可以为导出模块起别名

hello.js

let myAlert = function (value) {
  alert(value)
}

let myConsole = function (value) {
  console.log(value)
}

function myAdd (num1, num2) {
  console.log(num1 + num2)
}

export {myAlert as alert, myConsole as console, myAdd as add}

hello.vue

import {alert, console, add} from '../../util/es6Test/hello'
export default {
  mounted () {
    alert('abc')
    console('def')
    add(1, 2)
  }
}
posted @ 2019-04-14 22:26 bobi1234 阅读(...) 评论(...) 编辑 收藏