Vue-cli3.x + TSX踩坑 Cannot read property '$createElement' of undefined


目的:為了在組件中返回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...


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,168評論 0 29
  • 前幾天想學(xué)學(xué)Vue中怎么編寫可復(fù)用的組件,提到要對Vue的render函數(shù)有所了解??勺屑?xì)一想,對于Vue的ren...
    kangaroo_v閱讀 116,505評論 13 171
  • 深入響應(yīng)式 追蹤變化: 把普通js對象傳給Vue實例的data選項,Vue將使用Object.defineProp...
    冥冥2017閱讀 4,952評論 6 16
  • 40、React 什么是React?React 是一個用于構(gòu)建用戶界面的框架(采用的是MVC模式):集中處理VIE...
    萌妹撒閱讀 1,179評論 0 1
  • 因人節(jié)氣奈何天,泥煞衾函夢不圓。 苦雨潑寒宵似冰,百蟲聲里怯孤眠。這四句截取自錢鍾書和楊絳戀愛時寫給她的小詩《壬申...
    白玉蟬笈閱讀 997評論 0 0

友情鏈接更多精彩內(nèi)容