export default {
props: {
goToSomePage: {
type: Function,
default: () => { this.$router.push({ name: 'some-page' }) }
}
}
}
我想做这样的事情,但是“ this”是不确定的。
有什么办法可以解决这个问题?
我想执行默认操作,并在回调函数中使用“ this”。
答案 0 :(得分:1)
您的尝试失败的原因是:
this
is lexical处使用了箭头功能。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
property来传递您的函数。 Vue使用它神奇地将this
绑定到其父Vue实例。
答案 1 :(得分:1)
您可以如下将箭头功能更改为匿名功能
export default {
props: {
goToSomePage: {
type: Function,
default: function(){ this.$router.push({ name: 'some-page' }) }
}
}
}
匿名函数为此使用了封闭范围,因此您不必自己绑定它。这意味着匿名函数将使用与其他选项相同的作用域