VUE中的export default和export使用方法解析

目录
  • export default和export的区别
  • export default简单示例
    • 注意：
    • 代码示例

export default和export的区别

export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。

import就是在一个模块中加载另一个含有export接口的模块， import就是导入。

export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。这样就可以使用它们了。但是，在一个文件或模块中，export,import可以有多个，export default却只能有一个。

通过export方式导出，在导入的时候需要加{}大括号，export default 就不需要{}。

export default简单示例

导出：

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

接收：
代码中的test.js为上面的代码文件；aaa可以任意命名，可以在控制台输出info对象

import aaa,  from './test.js'
console.log(aaa)

注意：

1、export default 向外暴露的成员，可以使用任意变量来接收

2、在一个模块中，export default 只允许向外暴露一次

3、在一个模块中，可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】

5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义

6、使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

7、使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

代码示例

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

export var title = '小星星'

export var content = '哈哈哈'

在下面代码中接收，test.js使用export default 和 export 向外暴露的成员

import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);

到此这篇关于VUE中的export default和export使用方法解析的文章就介绍到这了,更多相关VUE中的export default内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue项目中new Vue()和export default{}的区别说明

    目录 new Vue()和export default{}区别 new Vue() export default{} import,export和export default注意问题 new Vue()和export default{}区别 在生成.导出.导入.使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向.它们含义到底是什么,又有什么异同呢? new Vue() 首先,Vue 是什么? 我看其他博主的理解,

  • Vue的export default和带返回值的data()及@符号的用法说明

    Vue的export default和带返回值的data()及@符号的用法说明

    目录 export default和带返回值data()及@符号用法 export和export default的使用 export的使用 export default的使用 export default和带返回值data()及@符号用法 一直以来很费解为什么vue组件有的写成export default,有什么用? 声明一个vue,相当于 new Vue({}) 达到可复用的目的,也就是说,export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件中的方法和变

  • Vue export default中的name属性有哪些作用

    Vue export default中的name属性有哪些作用

    目录 Vue export default的name属性作用 1.组件自身的递归调用 2.当我们使用vue.js官方提供的调试工具调试 3.最后一种应该是使用比较多的情况 Vue如何获取组件name属性 Vue export default的name属性作用 在划分模块和创建单页面组件时,常常写到name.嵌套路由中,index.vue极为常见. 那么在vue中,export default { name: ‘xxx’} 中的name到底有啥作用呢? 还是先回到官方的文档:官方链接 官方文档已经

  • 在vue中使用export default导出的class类方式

    目录 使用export default导出class类 关于export的多种导出形式 1.文件中存在多个export的时候 2.使用export default时 3.单个export且不使用default时 4.单个export使用default时 5.使用module.exports时 6.exports 7.exports第二种写法 8.混合导出 使用export default导出class类 首先我们要创建一个类并导出 class win {   getProcessInfo() {

  • 解决vue中修改export default中脚本报一大堆错的问题

    在写vue代码的时候遇到了一修改.vue文件中export default下脚本的时候总是报一堆莫名其妙的错误的问题: 出错原因: 在构建项目的时候Use ESLint to lint your code? (Y/n)选择了y,规范了js代码 解决途径: 在webpack.base.conf.js里面删掉/注释掉: { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), r

  • vue中methods、mounted等的使用方法解析

    vue中methods、mounted等的使用方法解析

    目录 methods.mounted的使用方法 vue生命周期(methods.mounted) 1.什么是生命周期 2.钩子函数 3.Vue生命周期之初始化阶段 methods.mounted的使用方法 created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行. watch:去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算

  • VUE中的export default和export使用方法解析

    目录 export default和export的区别 export default简单示例 注意: 代码示例 export default和export的区别 export主要用于对外输出本模块变量的接口,一个文件就可以被理解为一个模块.export就是导出. import就是在一个模块中加载另一个含有export接口的模块, import就是导入. export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文

  • 在Vue中使用highCharts绘制3d饼图的方法

    在Vue中使用highCharts绘制3d饼图的方法

    highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法. 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts,我们还需要安装后者 npm install highcharts

  • vue中简单弹框dialog的实现方法

    效果如下,dialog中内容自行添加 <template> <div> <div class="dialog-wrap"> <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div> <transition name="drop"> <div class=

  • Vue中的无限加载vue-infinite-loading的方法

    本文介绍了Vue中的无限加载vue-infinite-loading的方法,分享给大家,具体如下: 注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本 如何安装 npm install vue-infinite-loading --save 导入方式 es6模块导入方式 import InfiniteLoading from 'vue-infinite-loading';

  • 在VUE中实现文件下载并判断状态的方法

    新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func

  • 在vue中使用express-mock搭建mock服务的方法

    在vue中使用express-mock搭建mock服务的方法

    首先安装 nodemon ,如果是全局安装,那么所有的项目都可以使用mock服务 npm install nodemon 再安装express-mockjs npm i -D express-mockjs 接下来按照以下的步骤来 第一步 在项目根目录下建立api-interface文件,再建立一个文件夹叫mocks,这里面放json或者js都可以,然后再在mocks同级目录下建立app.js文件 第二步编写app.js 第三部 在mocks文件中编写一个叫test的json文件,文件中代码如下

  • vue中实现图片压缩 file文件的方法

    项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法 将图片压缩的方法写到这个公用的js(api.js)中 //base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件) function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].ma

  • 在Vue中创建可重用的 Transition的方法

    Vue.js中的transition确实很棒.毫无疑问,它们可以非常轻松地让应用程序栩栩如生,但是通常必须在每个项目中从头开始编写它们,甚至还需要引入animate.css之类的CSS库来使它们功能更强大. 如果我们可以将它们封装到组件中,并在多个项目中简单地重用它们,结果会怎样呢?我们将介绍几种定义transition的方法,并深入研究如何使它们真正可重用. 原始transition组件和CSS 定义transition的最简单方法是使用transition·或transition-group

  • Vue中强制组件重新渲染的正确方法

    有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

随机推荐