由于复杂的 js 函数而无法访问此对象 - Vuejs

Question

我正在为一个 VueJs 项目使用流行的 vue-select 组件。我想自定义一个 keyDownEvent 并查看文档以了解如何实现这一点。我遇到了一个使用现代 JS 技术组合的神秘示例。

<template>
  <v-select
          taggable
          multiple
          no-drop
          :map-keydown="handlers"
          placeholder="enter an email"
  />
</template>

<script>
export default {
  name: 'CustomHandlers',
  data: {
      variableIwantAccessTo: []
  },
  methods: {
    handlers: (map, vm) => ({
      ...map, 50: e => {
        e.preventDefault();
        if( e.key === '@' && vm.search.length > 0 ) {
          vm.search = `${vm.search}@gmail.com`;
        }
      },
    }),
  },
};
</script>

我了解 if 块中的简单逻辑，但我不了解导致它的所用技术的组合。我在自定义实现中遇到的主要问题是丢失了 this 对象的上下文。我想要这样的东西：

    handlers: (map, vm) => ({
  ...map, 50: e => {
    e.preventDefault();
    if( e.key === '@' && vm.search.length > 0 ) {
      console.log(this.variableIwantAccessTo);
    }
  },

我不知道如何通过这个实现传递它。 这是文档的参考：https://vue-select.org/guide/keydown.html#mapkeydown

Answer 1

如你所见，本例实际上有两层函数，处理函数的原始样式省略了{}，所以你没有地方在外部函数中定义一个self（对this的引用） .

在vue组件中，外层的this会指向组件，所以我们在这里声明self，然后在内层使用self作为闭包变量。

我想这会成功，请尝试一下。

export default {
  name: 'CustomHandlers',
  methods: {
    // handlers: (map, vm) => {
    // if it is arrow function,it can't do the trick 
    // thanks to  Yair Cohen
       handlers(map, vm) {
        const self = this;
        return {
          ...map, 50: e => {
            e.preventDefault();
            if( e.key === '@' && vm.search.length > 0 ) {
              vm.search = `${vm.search}@gmail.com`;
              // self will be this here
              const self2 = self;
            }
          },
        };
    },
  },
};

更新：代码更改，外部函数从箭头函数变为正常函数，

Answer 2

让我们分解一下这个函数：

1. 您正在声明一个名为 handlers 的箭头函数，它接受名为 map 和 vm 的两个参数。

您丢失上下文的原因是因为您使用箭头函数作为方法，如果您将该箭头函数更改为常规函数，您将能够访问this。

话虽如此，它似乎是故意这样设计的，通过查看代码，我可以假设您应该将上下文作为第二个参数传递 - vm。

1. 您正在返回一个对象：在对象的第一部分中，您使用扩展运算符扩展map 参数，由此我们可以假设map 也是一个对象并且您想要返回一个对象包含对象映射本身。 （通过使用扩展运算符，您实际上是将map 合并到您要返回的对象中。

你要返回的对象的第二部分是一个名为50的属性，这个属性是一个接收事件的方法，在那个事件上调用preventDefault()，然后有一个if语句，如果那个if语句通过它将vm.search 分配给某个值。

由于我们假设vm 代表上下文，这与分配this.search 相同，因此它本质上是为上下文中的变量分配特定值。

希望现在更清楚:)