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

 更新时间:2022年03月30日 08:39:55   作者:Zero .  
这篇文章主要介绍了Vue的export default和带返回值的data()及@符号的用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

一直以来很费解为什么vue组件有的写成export default,有什么用?

声明一个vue,相当于 new Vue({})  

达到可复用的目的,也就是说,export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件中的方法和变量。

那data()是什么意思?

起到局部变量的作用。也就是说,这个data()中return的变量和方法只限于当前声明此data()的组件使用。如果全局vue有个变量叫 user,当前组件也有个变量叫user,那vue里面的到底用哪个?所以data()就起到了变量隔离的一种效果。

在引入组件时路径上加上@符作用是什么?

在编写vue文件中引入模块(如下)这里路径前面的“@”符号表示什么意思?

import model from "@/common/model";

作用:

@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径

      resolve: {
                // 自动补全的扩展名
                extensions: [".js", ".vue", ".json"],
                // 默认路径代理
                // 例如 import Vue from 'vue',会自动到 'vue/dist/vue.common.js'中寻找
                alias: {
                    "@": resolve("src"),
                    "@config": resolve("config"),
                    "vue$": "vue/dist/vue.common.js"
                }}

export和export default的使用

export的使用

比喻index.js要使用test.js中的数据

首先在test.js文件中进行导出操作

在index.js文件进行导入操作

第一种方法:

此时的输出结果是:

注意:

export 不能直接写成这样子  
export{
    "":""    // 这样会报错
    ....
}

export default的使用

test.js文件

index.js文件中:

输出的结果:

注意:

export default let a=10   // 不能类似这样的写 一样也是会报错的

所以还是要多总结的。。。

记住:

一个js文件是可以有多个 export

但是一个js文件中只能有一个export default

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue项目怎样用nginx反向代理WebSocket请求地址

    vue项目怎样用nginx反向代理WebSocket请求地址

    这篇文章主要介绍了vue项目怎样用nginx反向代理WebSocket请求地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • 深入理解vue $refs的基本用法

    深入理解vue $refs的基本用法

    本篇文章主要介绍了深入理解vue $refs的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue组件间传值的实现解析

    Vue组件间传值的实现解析

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,这篇文章主要介绍了Vue组件间传值的实现
    2022-09-09
  • vue.js Table 组件自定义列宽实现核心方法

    vue.js Table 组件自定义列宽实现核心方法

    这篇文章主要介绍了vue.js Table 组件自定义列宽实现核心方法,文围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 在Vue中实现添加全局store

    在Vue中实现添加全局store

    这篇文章主要介绍了在Vue中实现添加全局store方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。这篇文章主要介绍了vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,需要的朋友可以参考下
    2019-06-06
  • vue 利用路由守卫判断是否登录的方法

    vue 利用路由守卫判断是否登录的方法

    今天小编就为大家分享一篇vue 利用路由守卫判断是否登录的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈Vue3 Composition API如何替换Vue Mixins

    浅谈Vue3 Composition API如何替换Vue Mixins

    这篇文章主要介绍了浅谈Vue3 Composition API如何替换Vue Mixins,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vite配置@别名以及让vscode智能提示路经的步骤

    vite配置@别名以及让vscode智能提示路经的步骤

    这篇文章主要给大家介绍了关于vite配置@别名以及让vscode智能提示路经的步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • vue引用js文件的多种方式(推荐)

    vue引用js文件的多种方式(推荐)

    这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05

最新评论