как использовать "это" в функции пропи по умолчанию для компонентов vue

Question

export default {
  props: {
    goToSomePage: {
      type: Function,
      default: () => { this.$router.push({ name: 'some-page' }) }
    }
  }
}

Я хочу сделать что-то подобное, но «это» не определено.

Есть ли способ решить эту проблему?

Я хочу задать действие по умолчанию и использовать «this» внутри функции обратного вызова.

Answer 1

Причина, по которой ваша попытка не работает, заключается в том, что:

1. Вы использовали функцию стрелки, где this является лексическим .
2. Vue не связывает автоматически функции, переданные свойству props, с каким-либо экземпляром Vue. Таким образом, this автоматически связывается с window (глобальным) объектом.

Вы можете попробовать что-то вроде этого:

new Vue({
  el: '#app',
  props: {
    goToSomePage: {
      type: Function
    }
  },
  computed: {
    computedGoToSomePage(){
      // If `goToSomePage` prop is provided, return that function
      if (typeof this.goToSomePage === 'function')
        return this.goToSomePage.bind(this);

      // Else, return your intended $router function here
      return (() => {
        /* UNCOMMENT THIS IN YOUR CODE */
        // this.$router.push({ name: 'some-page' })

        // This is to prove that `this` is referencing the Vue instance
        console.log(this);
      })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button @click="computedGoToSomePage">Go To Some Page</button>
</div>

Приведенный выше метод использует computed свойство для передачи вашей функции. Используя это, Vue волшебным образом связывает this с его родительским экземпляром Vue.