學Vue，就要學會vue JSX（三）-有解無憂

是時候使用`JSX`代替`createElement`了

接著上面的講，當我們看到上面用createElement去實作組件，太麻煩了，別說作業效率提高了，就是那些嵌套可以嵌套正確就很贊了，所以我們需要用JSX去簡化整個邏輯，當年我做專案的時候就遇到過這樣的情況，嵌套太多，自己都快搞不明白了，在崩潰的邊緣，

 methods: {
   $_handleInputUser(value) {
     this.formInline.user = value
   },
   $_handleChangeRegion(value) {
     this.formInline.region = value
   },
   $_handleSubmit() {}
 },
   /**
   *將 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，從 Vue 的 Babel 插件的 3.4.0   *版本開始，我們會在以 ES2015 語法宣告的含有 JSX 的任何方法和 getter 中 (不是函式或箭頭函式中) 自動注入 
   *const h = this.$createElement，這樣你就可以去掉 (h) 引數了，對于更早版本的插件，如果 h 在當前作用域中不可用，應用會拋錯，
  */
 render(h) {
     return (
       <ElForm inline model={this.formInline} >
         <ElFormItem label="審批人">
           <ElInput
             value={this.formInline.user}
             onInput={this.$_handleInputUser}
             placeholder="審批人"
           ></ElInput>
         </ElFormItem>
         <ElFormItem label="活動區域">
           <ElSelect
             value={this.formInline.region}
             onChange={this.$_handleChangeRegion}
             placeholder="活動區域"
           >
             <ElOption label="區域一" value="https://www.cnblogs.com/coderhf/p/shanghai"></ElOption>
             <ElOption label="區域二" value="https://www.cnblogs.com/coderhf/p/beijing"></ElOption>
           </ElSelect>
         </ElFormItem>
         <ElFormItem>
           <ElButton type="primarty" onClick={this.$_handleSubmit}>
             查詢
           </ElButton>
         </ElFormItem>
       </ElForm>
     )
   }

看了上面的代碼，大家其實會發現用JSX與template的語法都屬于xml的寫法，而且也比較像，但實質上還是有許多區別的，下面我將為大家一一分析

沒有`v-model`怎么辦，還有其他指令可以用嗎？

當你選擇使用JSX的時候，你就要做好和指令說拜拜的時候了，在JSX中，你唯一可以使用的指令是v-show,除此之外，其他指令都是不可以使用的，有沒有感到很慌，這就對了，不過呢，換一個角度思考,指令只是Vue在模板代碼里面提供的語法糖，現在你已經可以寫Js了，那些語法糖用Js都可以代替了，

v-model

v-model是Vue提供的一個語法糖，它本質上是由 value屬性（默認） + input事件(默認)組成的，所以，在JSX中，我們便可以回歸本質，通過傳遞value屬性并監聽input事件來實作資料的雙向系結

 export default {
   data() {
     return {
       name: ''
     }
   },
   methods: {
     // 監聽 onInput 事件進行賦值操作
     $_handleInput(e) {
       this.name = e.target.value
     }
   },
   render() {
     // 傳遞 value 屬性 并監聽 onInput事件
     return <input value=https://www.cnblogs.com/coderhf/p/{this.name} onInput={this.$_handleInput}></input>
   }
 }

經我測驗,在新版腳手架vue-cli4中，已經默認集成了對v-model的支持，大家可以直接使用`，如果你的專案比較老，也可以安裝插件babel-plugin-jsx-v-model`來進行支持

同樣的，在JSX中，對于.sync也需要用屬性+事件來實作，如下代碼所示：

 export default {
   methods: {
     $_handleChangeVisible(value) {
       this.visible = value
     }
   },
   render() {
     return (
       <ElDialog
         title="測驗.sync"
         visible={this.visible}
         on={{ 'update:visible': this.$_handleChangeVisible }}
       ></ElDialog>
     )
   }
 }

v-if 與 v-for

在模板代碼里面我們通過v-for去遍歷元素，通過v-if去判斷是否渲染元素，在jsx中，對于v-for，你可以使用for回圈,array.map來代替，對于v-if，可以使用if陳述句，三元運算式等來代替

回圈遍歷串列

 const list = ['java', 'c++', 'javascript', 'c#', 'php']
 return (
   <ul>
   {list.map(item => {
    return <li>{item}</li>
   })}
   </ul>
 )

使用條件判斷

 const isGirl = false
 return isGirl ? <span>小妹，哥哥教你寫Vue</span> : <span>鳥你干啥</span>

v-bind

在模板代碼中，我們一般通過 v-bind:prop="value"或:prop="value"來給組件系結屬性，在JSX里面寫法也類似

 render() {
   return <input value=https://www.cnblogs.com/coderhf/p/{this.name}></input>
 }

v-html 與 v-text

在說v-html與v-text之前，我們需要先了解一下Vue中的屬性，Vue中的屬性一共分為三種，第一種是大家寫bug時候最常用的props，即組件自定義的屬性；第二種是attrs，是指在父作用域里面傳入的，但并未在子組件內定義的屬性，第三種比較特殊，是domProps,經小編不完全測驗，在Vue中,domProps主要包含三個，分別是innerHTML,textContent/innerText和value，

v-html: 在模板代碼中，我們用v-html指令來更新元素的innerHTML內容，而在JSX里面，如果要操縱組件的innerHTML,就需要用到domProps

 export default {
   data() {
     return {
       content: '<div>這是Heo寫的一篇新的文章</div>'
     }
   },
   render() {
     // v-html 指令在JSX的寫法是 domPropsInnerHTML
     return <div domPropsInnerHTML={this.content}></div>
   }
 }

v-text: 看了上面的v-html，你是不是立即就想到了v-text在JSX的寫法domPropsInnerText,是的，你沒有想錯

 export default {
   data() {
     return {
       content: '這是Heo寫的一篇新的文章的內容'
     }
   },
   render() {
     return <div domPropsInnerText={this.content}></div>
   }
 }

但實際上我們不需要使用domPropsInnerText,而是將文本作為元素的子節點去使用即可

 <div>{this.content}</div>

實際上，對于domProps，只有innerHTML才需要使用domPropsInnerHTML的寫法，其他使用正常寫法即可

我還要監聽事件呢

監聽事件與原生事件

當我們開發一個組件之后，一般會通過this.$emit('change')的方式對外暴露事件，然后通過v-on:change的方式去監聽事件，很遺憾，在JSX中你無法使用v-on指令，但你將解鎖一個新的姿勢

  render() {
     return <CustomSelect onChange={this.$_handleChange}></CustomSelect>
   }


 ?
 JSX`中，通過`on` + 事件名稱的大駝峰寫法來監聽，比如事件`icon-click`,在`JSX`中寫為`onIconClick

有時候我們希望可以監聽一個組件根元素上面的原生事件，這時候會用到.native修飾符，有點絕望啊，修飾符也是不能用了，但好在也有替代方案，如下代碼

  render() {
     // 監聽下拉框根元素的click事件
     return <CustomSelect nativeOnClick={this.$_handleClick}></CustomSelect>
   }

監聽原生事件的規則與普通事件是一樣的，只需要將前面的on替換為nativeOn

除了上面的監聽事件的方式之外，我們還可以使用物件的方式去監聽事件

   render() {
     return (
       <ElInput
         value={this.content}
         on={{
           focus: this.$_handleFocus,
           input: this.$_handleInput
         }}
         nativeOn={{
           click: this.$_handleClick
         }}
       ></ElInput>
     )
   }

事件修飾符

和指令一樣，除了個別的之外，大部分的事件修飾符都無法在JSX中使用，這時候你肯定已經習慣了，肯定有替代方案的，

.stop ：阻止事件冒泡，在JSX中使用event.stopPropagation()來代替
.prevent：阻止默認行為，在JSX中使用event.preventDefault() 來代替
.self：只當事件是從偵聽器系結的元素本身觸發時才觸發回呼，使用下面的條件判斷進行代替
```
 if (event.target !== event.currentTarget){
   return
 }
```

.enter與keyCode: 在特定鍵觸發時才觸發回呼

 if(event.keyCode === 13) {
   // 執行邏輯
 }

除了上面這些修飾符之外，尤大大為了照顧我們這群CV仔，還是做了一點優化的,對于.once,.capture,.passive,.capture.once，尤大大提供了前綴語法幫助我們簡化代碼

  render() {
     return (
       <div
         on={{
           // 相當于 :click.capture
           '!click': this.$_handleClick,
           // 相當于 :input.once
           '~input': this.$_handleInput,
           // 相當于 :mousedown.passive
           '&mousedown': this.$_handleMouseDown,
           // 相當于 :mouseup.capture.once
           '~!mouseup': this.$_handleMouseUp
         }}
       ></div>
     )
   }

對了，還有插槽

插槽就是子組件中提供給父組件使用的一個占位符，插槽分為默認插槽，具名插槽和作用域插槽，下面我依次為您帶來每種在JSX中的用法與如何去定義插槽，

默認插槽

使用默認插槽

使用element-ui的Dialog時，彈框內容就使用了默認插槽，在JSX中使用默認插槽的用法與普通插槽的用法基本是一致的，如下代碼所示:

  render() {
     return (
       <ElDialog title="彈框標題" visible={this.visible}>
         {/*這里就是默認插槽*/}
         <div>這里是彈框內容</div>
       </ElDialog>
     )
   }

自定義默認插槽

在Vue的實體this上面有一個屬性$slots,這個上面就掛載了一個這個組件內部的所有插槽，使用this.$slots.default就可以將默認插槽加入到組件內部

 export default {
   props: {
     visible: {
       type: Boolean,
       default: false
     }
   },
   render() {
     return (
       <div  vShow={this.visible}>
         {/**通過this.$slots.default定義默認插槽*/}
         {this.$slots.default}
       </div>
     )
   }
 }

具名插槽

使用具名插槽

有時候我們一個組件需要多個插槽，這時候就需要為每一個插槽起一個名字，比如element-ui的彈框可以定義底部按鈕區的內容，就是用了名字為footer的插槽

  render() {
     return (
       <ElDialog title="彈框標題" visible={this.visible}>
         <div>這里是彈框內容</div>
         {/** 具名插槽 */}
         <template slot="footer">
           <ElButton>確定</ElButton>
           <ElButton>取消</ElButton>
         </template>
       </ElDialog>
     )
   }

自定義具名插槽

在上節自定義默認插槽時提到了$slots，對于默認插槽使用this.$slots.default，而對于具名插槽，可以使用this.$slots.footer進行自定義

 render() {
     return (
       <div  vShow={this.visible}>
         {this.$slots.default}
         {/**自定義具名插槽*/}
         <div >{this.$slots.footer}</div>
       </div>
     )
   }

作用域插槽

使用作用域插槽

有時讓插槽內容能夠訪問子組件中才有的資料是很有用的，這時候就需要用到作用域插槽,在JSX中，因為沒有v-slot指令，所以作用域插槽的使用方式就與模板代碼里面的方式有所不同了，比如在element-ui中，我們使用el-table的時候可以自定義表格單元格的內容，這時候就需要用到作用域插槽

 data() {
     return {
       data: [
         {
           name: 'Heo'
         }
       ]
     }
   },
   render() {
     return (
       {/**scopedSlots即作用域插槽，default為默認插槽，如果是具名插槽，將default該為對應插槽名稱即可*/}
       <ElTable data=https://www.cnblogs.com/coderhf/p/{this.data}>
         <ElTableColumn
           label="姓名"
           scopedSlots={{
             default: ({ row }) => {
               return <div style="color:red;">{row.name}</div>
             }
           }}
         ></ElTableColumn>
       </ElTable>
     )
   }

自定義作用域插槽

使用作用域插槽不同，定義作用域插槽也與模板代碼里面有所不同，加入我們自定義了一個串列項組件，用戶希望可以自定義串列項標題，這時候就需要將串列的資料通過作用域插槽傳出來，

 render() {
     const { data } = this
     // 獲取標題作用域插槽
     const titleSlot = this.$scopedSlots.title
     return (
       <div >
         {/** 如果有標題插槽，則使用標題插槽，否則使用默認標題 */}
         {titleSlot ? titleSlot(data) : <span>{data.title}</span>}
       </div>
     )
   }

ok，vue JSX 的重點就已經講完了，下面一篇文章來講一下注意的地方和總結，大家覺得對你有幫助的話可以給我點個贊哦，推薦給更多的人看，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43695.html

標籤：JavaScript

上一篇：相鄰元素margin的自動合并與float的坑

下一篇：學Vue，就要學會vue JSX（大結局）

學Vue，就要學會vue JSX（三）

是時候使用JSX代替createElement了

沒有v-model怎么辦，還有其他指令可以用嗎？