javascript - vueJS - 在回调函数中使用“this”

Question

编辑---已解决

事实证明这不是问题，Vue 会自动为您绑定，因此无需手动绑定。

结束编辑---

我正在尝试将方法传递给子组件的回调（或事件）。
一切都很好，除了function在错误的上下文中执行。

在反应中，我将绑定在functions中constructor，我不确定解决方案在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>

标签： javascriptvue.js

Answer 1

这是它的解决方案，原来你可以使用“创建”生命周期钩子，这类似于在构造函数中绑定时的反应

<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>

子组件代码

<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>