5-4 import,export属性
属性 import EXPORT
2023-09-14 08:58:48 时间
一.默认 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)}`);
相关文章
- HTML5全局属性汇总
- 【Spring Boot】Spring Boot之使用 Spring Boot Configuration Processor 完成设置自定义项目属性自动补全
- es6 javascript的class的静态方法、属性和实例属性
- vs2015对revit2018二次开发之不启动Revit,读取rvt文件里墙及其属性
- 属性动画 基本使用案例 [MD]
- spark属性配置的优先级
- 〖大前端 - 基础入门三大核心之CSS篇⑧〗- CSS3文本的常用文本样式属性之字体属性详解
- 【Kotlin 协程】Channel 通道 ④ ( Channel 通道的热数据流属性 | Channel 通道关闭过程 | Channel 通道关闭代码示例 )
- ceph InfoLocker WORM时钟 WORM属性 WORM日志 WORM 计算文件过期时间 WORM文件状态
- jQuery 属性操作方法
- HarmonyOS鸿蒙学习笔记(11)Flex组件alignItems属性说明