首页 > 其他分享 >在Vue中的三种不同的模块导出方式:分别暴露、统一暴露和默认暴露。

在Vue中的三种不同的模块导出方式:分别暴露、统一暴露和默认暴露。

时间:2024-08-21 13:26:20浏览次数:7  
标签:Vue 暴露 导出 js person export 模块

 

一,分别暴露:

通过在模块中使用export关键字来分别导出多个变量、函数或组件。例如: test.js

export const person = {name:"bruce",age:33}
export function getPerson(){
  console.log(11)  
}

在另一个模块中,可以使用解构赋值来导入这些分别暴露的变量、函数或组件:

import {person,getPersion} from "test.js";

二,统一暴露: 

通过在模块中使用export关键字来统一导出多个变量、函数或组件。例如:test.js

const person = {name:"bruce",age:33}
function getPerson(){
  console.log(11)  
}

export {person,getPerson}

在另一个模块中,可以使用解构赋值来导入这些分别暴露的变量、函数或组件:

import {person,getPersion} from "test.js";

三,默认暴露: 

通过在模块中使用export default关键字来默认导出一个变量、函数或组件。例如:

test1.js

const person = {name:"bruce",age:33}


export default person 

在另一个模块中,可以使用解构赋值来导入这些分别暴露的变量、函数或组件:

import person from './test1';   

注意: 在默认导出中:

  1.export default 只能导出一个默认模块,这个模块可以匿名;

  比如上述中可以如下导出:

import obj from  './test1';

那么,obj就是test1.js中的导出的对象person

  

 

标签:Vue,暴露,导出,js,person,export,模块
From: https://www.cnblogs.com/shaoyishi/p/18371403

相关文章

  • ssm城投公司企业人事管理系统设计与实现+vue
    文章目录目录文章目录论文目录项目介绍开发环境系统实现论文参考论文目录摘 要Abstract第1章 绪论1.1 课题背景1.2课题意义1.3研究内容第2章 开发环境与技术2.1Java语言2.2 MYSQL数据库2.3IDEA开发工具2.4SSM框架第3章 系统分析......
  • Node.js 的 模块化
    Node.js中的模块Node.js遵循了CommonJS模块化规范,CommonJS规定了模块的特性和各模块之间如何相互依赖每个模块内部,module变量代表当前模块module变量是一个对象,它的exports属性(即module.exports)是对外的接口加载某个模块,其实是加载该模块的module.exports属性。r......
  • 2024-08-21 关于vue3中使用emit的一些笔记
    问题1:emitisnotdefinedwatch(()=>content.value,(val)=>{emit('input',val);});原因:直接使用了未定义的emit导致报错。解决方案:使用vue3中的defineEmits函数定义一个可以定义触发的函数,比如constemit=defineEmits(['input']);此处的emit只是一个变量,你可......
  • 基于Java+SpringBoot+Vue的房屋租赁管理系统的设计与实现
    基于Java+SpringBoot+Vue的房屋租赁管理系统的设计与实现前言✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌......
  • Vue.js 中的 vue-property-decorator 使用详解
    引言Vue.js是一个流行的前端框架,它的核心理念是让开发者以声明式的方式构建用户界面。尽管Vue的官方API非常直观易用,但随着项目的复杂度增加,使用TypeScript进行类型检查和更好的代码组织变得越来越重要。vue-property-decorator是一个用于在Vue.js中使用TypeScr......
  • 【Vue】模板语法
    系列文章目录第三章模板语法文章目录系列文章目录前言一、文本:二、显示原生的HTML三、属性绑定四、使用JavaScript表达式:五、条件判断:六、v-show和v-if:七、循环1.循环数组2.循环对象3.保持状态4.触发视图更新5.覆盖数组八、事件绑定1.基本使用2.传入event参......
  • 解决Cannot find module ‘@/score/test/index.vue‘ or its corresponding type decl
    {"compilerOptions":{"target":"esnext","module":"esnext","strict":true,"jsx":"preserve","importHelpers":true,"moduleResolu......
  • 038、Vue3+TypeScript基础,使用router.push进行路由跳转并传参
    01、main.js//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入路由importrouterfrom'./router'constapp=createApp(App);//使用路由app.use(router);//App.vue的根元素id为appapp......
  • 【vue教程】七. Vue 的动画和过渡
    文章目录往期列表回顾本章涵盖知识点Vue的内置动画系统基本的进入和离开过渡列表过渡CSS过渡CSS过渡基础Vue中的CSS过渡JavaScript动画使用JavaScript钩子第三方动画库的使用集成Animate.css实例演示创建一个简单的动画应用结语往期列表【vue教程】......
  • vue3 响应式 API:watch()、watchEffect()
    watch()基本概念watch()用于监视响应式数据的变化,并在数据变化时执行相应的回调函数。可以监视单个响应式数据、多个响应式数据的组合,或者一个计算属性。返回值返回一个函数,调用这个函数可以停止监视。特点watch()默认是懒侦听的,即仅在侦听源发生变化时才执行回调函......