只能在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講完了，這一內容基本上講的差不多了，覺得對您有幫助的可以幫忙點個贊，在這里謝謝大家了，我會不斷出新的優質的文章給大家分享，一起學習進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43696.html
標籤：JavaScript