Javascript vueJS-使用'；这'；在回调函数中

编辑-已解决

事实证明，这并不是一个真正的问题，Vue将为您自动绑定，因此无需手动绑定

结束编辑---

我试图将一个方法传递给回调（或事件）子组件。
除了

函数

在错误的上下文中执行外，所有操作都非常有效

在react中，我将绑定

构造函数中的
函数
，我不确定
Vue中的解决方案是什么

范例

<template>
  <div id="app">
    <Header/>
    <Tasks 
    :todos="todos"
    @onMarkAsDone="markAsDone"
    >
    </Tasks>
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Tasks from './components/Tasks.vue';

export default {
  name: 'my-component',
  data() {
    return {
      name: 'Tasks',
      todos: [{
        id:0,
        text:'Complete this by lunch',
        isDone: false
      }]
    }
  },
  methods: {
    markAsDone(id) {
      console.log(this); // refers to the child component
      // can't access this.todos
    }
  },
  components: {
    Tasks,
    Header
  }
}
</script>


从“./components/Header.vue”导入标题；
从“./components/Tasks.vue”导入任务；
导出默认值{
名称：“我的组件”，
数据（）{
返回{
名称：“任务”，
待办事项：[{
id:0，
正文：'在午餐前完成此任务'，
isDone：错
}]
}
},
方法：{
markAsDone（id）{
console.log（this）；//引用子组件
//无法访问此.todos
}
},
组成部分：{
任务，
标题
}
}
这里是解决方案，您可以使用“创建的”生命周期挂钩，这类似于在构造函数中绑定时的反应

<template>
  <div id="app">
    <Header/>
    <Tasks 
    :todos="todos"
    @onMarkAsDone="markAsDone"
    >
    </Tasks>
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Tasks from './components/Tasks.vue';

export default {
  name: 'my-component',
  data() {
    return {
      name: 'Tasks',
      todos: [{
        id:0,
        text:'Complete this by lunch',
        isDone: false
      }]
    }
  },
  methods: {
    markAsDone(id) {
      console.log(this.todos); // can now access the correct 'this'
    }
  },
  created() {
    this.markAsDone = this.markAsDone.bind(this);
  },
  components: {
    Tasks,
    Header
  }
}
</script>


从“./components/Header.vue”导入标题；
从“./components/Tasks.vue”导入任务；
导出默认值{
名称：“我的组件”，
数据（）{
返回{
名称：“任务”，
待办事项：[{
id:0，
正文：'在午餐前完成此任务'，
isDone：错
}]
}
},
方法：{
markAsDone（id）{
console.log（this.todos）；//现在可以访问正确的“this”
}
},
创建（）{
this.markAsDone=this.markAsDone.bind（this）；
},
组成部分：{
任务，
标题
}
}

子组件代码

<template>
  <ul>
    <li 
      :class="{isDone:todo.isDone}"
      :key="todo.id" 
      v-for="todo in todos">
      <input type='checkbox' @change="markAsDone(todo.id)"/>
       {{todo.text}}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tasks',
  props: ['todos'],
  methods: {
    markAsDone(id) {
      this.$emit('onMarkAsDone', id);
    } 
  }
}
</script>




{{todo.text}


导出默认值{
名称：“任务”，
道具：[待办事项]，
方法：{
markAsDone（id）{
此.$emit（'onMarkAsDone'，id）；
} 
}
}
您可以使用
markAsDone
方法返回函数，如下所示：

markAsDone() {
  return id => {
    console.log(this.todos);
  }
},

然后在将方法作为道具传递时调用它：

:onMarkAsDone="markAsDone()"

然后可以在子组件内调用prop方法

这将为您提供所需的功能，而无需在
created（）
hook中使用
bind
。
通常，您可以尝试使用箭头函数语法来保留
此
的词法上下文。但据我所知，在Vue中有一些黑客代理。你能重现问题的可运行代码吗。我不明白你想要实现什么。2.如果存在子-父关系，则显示子组件代码。不幸的是，子组件与此无关，因为触发此回调的“原因”无关紧要，它仍然不能正确的“此”-在任何情况下，我将回答我自己的问题，因为我发现它可以在生命周期的“创建”方法中完成如果可以，请在
任务
组件中提供代码。我认为
这个
将在Vue中自动更正，因为有一个神奇的东西叫做
代理
。我很好奇这里怎么会出错。如果您可以像上面的代码一样在
created
中执行
bind（this）
，那么您也可以执行箭头函数语法
markAsDone=（id）=>{}
来实现
这个
修复，它会更干净，无需绑定。我在React-arrow函数中做了相同的hack，而不是bind。我将添加组件代码，但它与此无关。在任何情况下，使用markAsDone=（id）=>{}将产生一个不同的问题，因为现在“this”将是未定义的（请随意尝试）发生这种情况的原因是“this”是在代码执行时设置的，这是模块itselfVue自动将
methods
中的所有函数绑定到当前实例。您不必自己调用
bind
。这里一定发生了别的事情。@skiller-是的，你是对的，我刚刚删除了绑定，它仍然有效，我一定是试图访问错误的属性，并假设它是一个bind issueGood调用，但你必须承认它看起来有点不确定：）没有任何东西会调用内部arrow函数。当事件发生时，它只调用
markAsDone
，这将返回一个将被忽略的函数。@我假设他在子组件中调用该函数。我更新了我的asnwer。谢谢你提到这一点。但它不是道具，它是一个事件监听器。孩子们将无法使用它。