zoukankan      html  css  js  c++  java
  • 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)}`);
    
  • 相关阅读:
    变量的解构赋值
    vue-progressbar 知识点
    <script>标签里的defer和async属性 区别(待补充)
    管理node.js版本的模块:n
    node 知识点
    让node支持es模块化(export、import)的方法
    jvm 知识点
    前端 术语
    js的严格模式
    commonJS、AMD、es模块化 区别(表格比较)
  • 原文地址:https://www.cnblogs.com/alantao/p/8335514.html
Copyright © 2011-2022 走看看