Vue中的export default 和带返回值的data()以及@符号的作用 --转载

本人问题是子组件中的data不太明白，度娘了下发现篇好文章在此记录下。

//子组件
export default {
        name: "file",
        props: {
            text: {
                default:"上传文件"
            }
        },
        data: function(){
            return {}
        }
 }

一直以来很费解为什么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 这个目录，避免写麻烦又易错的相对路径

亲测有效

import Pagination from "../../components/pagination.vue";
import File from "@/components/file";

转载连接：https://blog.csdn.net/admin123404/article/details/103118047