目的:為了在組件中返回JSX語法的VueComponent
報錯:Cannot read property '$createElement' of undefined
代碼:
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class App extends Vue{
private getSpan(){
return <span>不會報錯</span>
}
private getError = () => {
return <span>我在編譯時就會報錯,原因是箭頭函數(shù)改變了this的指針,導(dǎo)致這里面的this指向的是App的實例,而不是被@Component包裹后的實例</span>
}
render(){
return (
<div>
{ this,getSpan() }
{ this.getError() }
</div>
)
}
}
總結(jié):使用@Component裝飾器的方式創(chuàng)建的組件對象中,外層盡量不要使用箭頭函數(shù),特別是Vue自身的函數(shù),例如render、created、mounted...