javascript - how to use "this" in vue components default prop function - Stack Overflow

admin管理员组

文章数量:1341459

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

I want do something like this but "this" is undefined.

Is there any way to solve this problem?

I want to give a default action and use "this" inside that callback func.

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

I want do something like this but "this" is undefined.

Is there any way to solve this problem?

I want to give a default action and use "this" inside that callback func.

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow asked Apr 9, 2019 at 7:58 KuruKuru 1,51722 gold badges1515 silver badges2121 bronze badges 1

• please show how do you use it? – Boussadjra Brahim Commented Apr 9, 2019 at 8:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

you can change arrow function to anonymous function as below

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

the anonymous function uses the enclosing scope for this so you don't have to bind it by ur self. that means here the anonymous function will use the same scope as the other options

The reason your attempt does not work is because:

1. You used arrow function where this is lexical.
2. Vue does not automatically bind functions passed to props property with any Vue instance. So this is automatically bind to the window (global) object.

You can try something like this:

new Vue({
  el: '#app',
  props: {
    goToSomePage: {
      type: Function
    }
  },
  puted: {
    putedGoToSomePage(){
      // 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./ajax/libs/vue/2.5.17/vue.min.js"></script>

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

The method above make use of puted property to pass your function. Using that, Vue magically bind this to its parent Vue instance.

本文标签： javascripthow to use quotthisquot in vue components default prop functionStack Overflow