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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
mitt又称事务总线,是第三方插件,这篇文章主要为大家详细介绍了Vue3中事件总线mitt的使用方式,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
Vue3中的setup是一个新的生命周期函数,它可以用来代替组件中的 data和一些生命周期函数（如created和beforeMount）,这篇文章主要介绍了vue3如何使用setup代替created的相关资料,需要的朋友可以参考下2023-09-09
vue项目中接入websocket时需要ip端口动态部署问题
这篇文章主要介绍了vue项目中接入websocket时需要ip端口动态部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要为大家介绍了基于ant-design-vue实现表格操作按钮组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了Vue如何动态改变列表搜索出关键词的字体颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文将探讨 props 验证失败的常见原因,并提供解决方法,帮助开发者在 Vue 组件开发中避免这些问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要为大家详细介绍了前端框架Vue.js构建大型应用的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论