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组件，在其它引入当前组件时可以使用当前组件中的方法和变量。

那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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    总结一下我遇到的一个纠结很久的问题. 在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报错: 原因: 在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined. 解决方案: 一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性 二)使用箭头函数 补充:解决 vue

  • vue中data和data()的区别说明

    vue中data和data()的区别说明

    目录 data和data()的区别 Vue实例中data属性 组件化的项目中使用 详解vue.js中的data 文档之一 文档之二 文档之三 文档之四 data和data()的区别 Vue实例中data属性 new Vue({   el: '#app',   data: {     message: 'message'   } }) 组件化的项目中使用 export default{     data(){         return {            message: 'messag

  • 解决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里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

  • 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组件,在其它引入当前组件时可以使用当前组件中的方法和变

  • Mysql带返回值与不带返回值的2种存储过程写法

    过程1:带返回值: drop procedure if exists proc_addNum; create procedure proc_addNum (in x int,in y int,out sum int) BEGIN SET sum= x + y; end 然后,执行过程,out输出返回值: call proc_addNum(2,3,@sum); select @sum; 过程2:不带返回值: drop procedure if exists proc_addNum; create

  • 创建公共调用 jQuery Ajax 带返回值

    复制代码 代码如下: <script type="text/javascript"> /* 请求Ajax 带返回值,并弹出提示框提醒 --------------------------------------------------*/ function getAjax(url, parm, callBack) { $.ajax({ type: 'post', dataType: "text", url: url, data: parm, cache:

  • asp.net实现调用存储过程并带返回值的方法

    本文实例讲述了asp.net实现调用存储过程并带返回值的方法.分享给大家供大家参考,具体如下: /// <summary> /// DataBase 的摘要说明 /// </summary> public class DataBase { /// <summary> ///DataBase 的摘要说明 /// </summary> protected static SqlConnection BaseSqlConnection = new SqlConnec

  • jquery+ajax请求且带返回值的代码

    现在比较流行使用jquery的ajax来实现一些无刷新请求效果,本章节提供一个非常简单的代码实例供大家参考之用,希望能够给需要的朋友带来一定的帮助,代码如下: <script type="text/javascript"> /* 请求Ajax 带返回值,并弹出提示框提醒 --------------------------------------------------*/ function getAjax(url,parm,callBack) { $.ajax({ typ

  • Java 带参数与带返回值的方法的定义和调用

    目录 带参数方法的定义和调用 形参和实参 带参数方法练习 带返回值的方法的定义和调用 带返回值的方法定义 带返回值的方法调用 带参数方法的定义和调用 形参和实参 形参:方法定义中的参数 相当于变量定义格式,例int number 实参:方法调用中参数 等同于变量或常量,例如10   , number 带参数方法练习 需求: 设计一个方法用于打印两个数中最大数,数据来自于方法参数 思路: 1.定义一个方法,用于打印两个书中的最大数,例如getMax() public static void get

  • Java带返回值的方法的定义和调用详解

    目录 带返回值的方法练习 方法的注意事项 方法注意事项 方法通用格式 带返回值的方法练习 需求: 设计一个方法可以获取两个数的较大值,数据来自于参数 思路: 1. 定义一个方法,用于获取两个数中的较大数 public static int getMax(int a,int b){ } 2.使用分支语句分两种情况对两个数的大小进行处理 if (a>b) { }else{ } 3. 根据题设分别设置两种情况下对应返回值结果 if (a>b) { return a; }else{ return b;

  • 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 是什么? 我看其他博主的理解,

  • shell函数内调用另一个函数(不带返回值和带返回值)

    shell函数内调用另一个函数(不带返回值和带返回值)

    目录 一.函数B调用不带返回值的函数A 二.函数B调用带返回值的函数A,并接收函数A的返回值进行输出 一.函数B调用不带返回值的函数A 新建文件,命名为 test.sh,添加如下代码: #!/bin/bash # 即将被调用的函数A function A(){ a="aaa" echo $a } # 函数B,直接调用A function B(){ A echo "bbb" } B 命令行中通过sh test.sh执行结果: 二.函数B调用带返回值的函数A,并接收函数

  • C语言中带返回值的宏定义方式

    目录 C语言中带返回值的宏定义 宏定义编写 宏定义分析 宏定义验证 经验总结 C语言中一些宏定义和常用的函数 typeof 关键字 snprintf()函数的作用 __builtin_expect的作用 C语言中常用的预定义 反斜杠的作用 总结 C语言中带返回值的宏定义 相信大家在实际工作中,一定有遇到需要编写一个宏定义,且希望它能带返回值的场景吧? 比如我之前就遇到一个场景,早期的代码是使用函数实现的功能,现在想换成宏定义,但是又要保留之前调用函数的代码不动,这样我就只能想办法写一个带返回值的

随机推荐