Vue methods 用箭头函数取不到 this

2020-01-04 08:10:41

参考地址 Vue methods 用箭头函数取不到 this

首先,看文档 http://cn.vuejs.org/api/#methods

实例方法。实例可以直接访问这些方法,也可以用在指令表达式内。方法的 this 自动绑定到实例。
在vue的methods的this是自动绑定的

然后见代码:https://github.com/vuejs/vue/...

function initMethods (vm: Component) {  const methods = vm.$options.methods  if (methods) {    for (const key in methods) {
      vm[key] = methods[key] == null ? noop : bind(methods[key], vm)      if (process.env.NODE_ENV !== 'production' && methods[key] == null) {
        warn(          `method "${key}" has an undefined value in the component definition. ` +          `Did you reference the function correctly?`,
          vm
        )
      }
    }
  }
}

你用箭头函数,会返回一个绑定当前执行上下文中的this,而且这个this,不可再切换更改了。你此处绑定的 this 是当前函数体内的this,严格模式下为undefined;



更多讨论内容,点开文章开头的链接


  • 2019-12-23 23:38:59

    vue-apollo的多客户端的用法

    vue-apollo的多客户端的用法以及apollo.js的配置 关于如何安装和如何使用,这篇文章就先暂时不介绍了,如果不清楚就看我另一篇关于vue-apollo的用法 在做项目中,有时候后端的接口是按模块功能去划分的,那么请求的地址就会不同,关于vue-apollo的多客户端配置如下

  • 2019-12-27 08:40:55

    align-self和align-items的区别

    align-items在伸缩容器上使用它,伸缩容器内部所有的元素都一致地受制于align-items的值。 但是有些时候,我们希望伸缩容器内部某个元素在侧轴上的排列方式有所差异。此时就不能使用 align-items,因为align-items作用于整体。我们希望作用于部分。这就是align-self的发挥场地。

  • 2019-12-29 15:01:37

    修改laravel分页的样式

    首先获取到数据,paginate方法 能够自动判定当前页面正确的数量限制和偏移数。默认情况下,当前页数由HTTP 请求所带的 ?page 参数来决定。当然,该值由 Laravel 自动检测,并自动插入由分页器生成的链接。

  • 2019-12-29 15:05:57

    php 数组分页 array_slice()函数用法

    今天用到一个函数,非常好用,分享给大家 array_slice() -从数组中取出一段 也就是说用这个函数可以和sql语句一样实现分页,原理是将查询出的数组,取出从指定下标开始到指定长度的数组

  • 2019-12-30 10:17:21

    router-link传递参数,query

    在vue-router中,有两大对象被挂载到了实例this; $route(只读、具备信息的对象); $router(具备功能的函数) 查询字符串: 去哪里 ? <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>