目的:为了在组件中返回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>我在编译时就会报错,原因是箭头函数改变了this的指针,导致这里面的this指向的是App的实例,而不是被@Component包裹后的实例</span>
}
render(){
return (
<div>
{ this,getSpan() }
{ this.getError() }
</div>
)
}
}
总结:使用@Component装饰器的方式创建的组件对象中,外层尽量不要使用箭头函数,特别是Vue自身的函数,例如render、created、mounted...