這篇文章主要介紹Vue中jsx不完全應(yīng)用的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為榆樹(shù)等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及榆樹(shù)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、榆樹(shù)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

在使用Vue開(kāi)發(fā)項(xiàng)目時(shí)絕大多數(shù)情況下都是使用模板來(lái)寫(xiě)HTML，但是有些時(shí)候頁(yè)面復(fù)雜又存在各種條件判斷來(lái)顯示/隱藏和拼湊頁(yè)面內(nèi)容，或者頁(yè)面中很多部分存在部分DOM結(jié)構(gòu)一樣的時(shí)候就略顯捉襟見(jiàn)肘，會(huì)寫(xiě)大量重復(fù)的代碼，會(huì)出現(xiàn)單個(gè).vue文件過(guò)長(zhǎng)的情況，這個(gè)時(shí)候我們就需要更多的代碼控制，這時(shí)候可以使用渲染函數(shù)。

渲染函數(shù)想必平時(shí)幾乎沒(méi)有人去寫(xiě)，因?yàn)閷?xiě)起來(lái)很痛苦（本人也沒(méi)有寫(xiě)過(guò)）。更多的是在Vue中使用JSX語(yǔ)法。寫(xiě)法上和在React中差不多，但是功能上還是沒(méi)有React中那么完善。

在寫(xiě)JSX的過(guò)程中不得考慮一個(gè)樣式的問(wèn)題，雖然可以直接在.vue文件中不寫(xiě)部分，只寫(xiě)

在父組件中使用：

 
  
{{ injectedProps.user.firstName }}
  Log Full Name
 

在上面的代碼中我們實(shí)際上使用解構(gòu)的方式來(lái)取得injectedProps，基于解構(gòu)的特性還可以重命名屬性名，在prop為undefined的時(shí)候指定初始值。

 {{ user.firstName }}

如果組件只有一個(gè)默認(rèn)的插槽還可以使用縮寫(xiě)語(yǔ)法，將v-slot:default="slotProps"寫(xiě)成v-slot="slotProps"，命名插槽寫(xiě)成v-slot:user="slotProps"，如果想要?jiǎng)討B(tài)插槽名還可以寫(xiě)成v-slot:[dynamicSlotName]，此外具名插槽同樣也有縮寫(xiě)語(yǔ)法，例如 v-slot:header可以被重寫(xiě)為#header

上面介紹了很多插槽相關(guān)的知識(shí)點(diǎn)足已說(shuō)明其在開(kāi)發(fā)過(guò)程中的重要性。說(shuō)了很多在模板中如何定義和使用作用域插槽，現(xiàn)在進(jìn)入正題如何在jsx中同樣使用呢？

// current-user components
{
 data() {
 return {
  user: {
  firstName: 'snow',
  lastName: 'wolf'
  }
 }
 },
 
 computed: {
 slotProps() {
  return {
  user: this.user,
  logFullName: this.logFullName
  }
 }
 },
 
 methods: {
 logFullName() {
  console.log(`${this.firstName} ${this.lastName}`)
 }
 },
 
 render() {
 return (
  

  {this.$scopedSlots.subTitle({
   injectedProps: this.slotProps
  })}
  
 )
 }
}

然后在父組件中以jsx使用：

 (
  

   
injectedProps.user
  Log Full Name
  
 )
 }
}}>

指令

這里需要注意的是在jsx中所有Vue內(nèi)置的指令除了v-show以外都不支持，需要使用一些等價(jià)方式來(lái)實(shí)現(xiàn)，比如v-if使用三目運(yùn)算表達(dá)式、v-for使用array.map()等。

對(duì)于自定義的指令可以使用v-name={value}的語(yǔ)法來(lái)寫(xiě)，需要注意的是指令的參數(shù)、修飾符此種方式并不支持。以官方文檔指令部分給出的示例v-focus使用為例，介紹二種解決辦法：

1 直接使用對(duì)象傳遞所有指令屬性

2 使用原始的vnode指令數(shù)據(jù)格式

{
 directives：{
 focus: {
  inserted: function(el) {
  el.focus()
  }
 }
 },
 
 render() {
 const directives = [
  { name: 'focus', value: true }
 ]
  
 return (
  

   
  
 )
 }
}

過(guò)濾器

過(guò)濾器其實(shí)在開(kāi)發(fā)過(guò)程中用得倒是不多，因?yàn)?strong>更多時(shí)候可以通過(guò)計(jì)算屬性來(lái)對(duì)數(shù)據(jù)做一些轉(zhuǎn)換和篩選。這里只是簡(jiǎn)單提及一下并沒(méi)有什么可以深究的知識(shí)點(diǎn)。

在模板中的用法如下：

{{ message | capitalize }}