學Vue，就要學會vue JSX（大結局）

只能在render函數裏面使用JSX嗎

固然不是，你能夠定義method，而後在method裏面返回JSX,而後在render函數裏面調用這個方法，不只如此，JSX還能夠直接賦值給變量，好比下面這段代碼

  methods: {
     $_renderFooter() {
       return (
         <div>
           <ElButton>肯定</ElButton>
           <ElButton>取消</ElButton>
         </div>
       )
     }
   },
   render() {
     const buttons = this.$_renderFooter()
     return (
       <ElDialog visible={this.visible}>
         <div>這裏是一大坨內容</div>
         <template slot="footer">{buttons}</template>
       </ElDialog>
     )
   }

 

就算我今天不吃晚飯，也要把指令給你們講講

 

基礎用法

雖然大部份內置的指令沒法直接在JSX裏面使用，可是自定義的指令能夠在JSX裏面使用，就拿element-ui的v-loading指令來講，能夠這樣用

   render() {
     /**
      * 一個組件上面可使用多個指令，因此是一個數組
      * name 對應指令的名稱， 須要去掉 v- 前綴
      * value 對應 `v-loading="value"`中的value
      */
     const directives = [{ name: 'loading', value: this.loading }]
     return (
       <div
         {...{
           directives
         }}
       ></div>
     )
   }

 

修飾符

有些指令還可使用修飾符,好比上例中的v-loading,你能夠經過修飾符指定是否全屏遮罩，是否鎖定屏幕的滾動，這時候就須要這樣寫 v-loading.fullscreen.lock = "loading"

   render() {
     /**
      * modifiers指定修飾符，若是使用某一個修飾符，則指定這個修飾符的值爲 true
      * 不使用能夠設置爲false或者直接刪掉
      */
     const directives = [
       {
         name: 'loading',
         value: this.loading,
         modifiers: { fullscreen: true, lock: false }
       }
     ]
     return (
       <div
         {...{
           directives
         }}
       ></div>
     )
   }

 

 

總結

好了，今天講到這裏已經把vue JSX講完了。這一內容基本上講的差很少了。以爲對您有幫助的能夠幫忙點個贊。在這裏謝謝你們了。我會不斷出新的優質的文章給你們分享，一塊兒學習進步。