vue jsx 記錄

template的寫法 是 vue 的靈魂，jsx的寫法就沒那味了。雖然我一直都是這麼相信的，但是template寫久了感覺沒啥新鮮感，於是打算用jsx的寫法來解悶。

寫jsx你需要準備什麼？啥都不需要，雖然官網建議安裝@vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props，但是為了嚐鮮和減少對項目的影響，你可以直接在render函數內體驗jsx語法！

render函數

render 函數 需要返回一個 jsx 寫法的數據

render(){
      return (<div class="wrapper">{this.contentRender()}</div>)
},
methods:{
      contentRender(){
            // 函數必須有返回值
            return (<p>hello world!!</p>)
      }
}

props傳遞

:xxx="xxx" 改成 xxx={xxx},如果訪問的是data或者props數據，要加上this.xxx

<parent data={this.data} ...></parent>

注意：1. .sync的修飾符在jsx用不了。2. v-model 改成 vModel

事件監聽

@改成 on-

<parent on-success={()=>this.onSuccess()}></parent>

注意： 原生事件的修飾符可能用不了，官方的寫法需要安裝插件編譯 傳送門

v-if 和 v-for

v-if 可以用 js條件判斷和三元運算符來代替；v-for 可以用數組遍歷來代替

// v-if
{!!this.show && (<div>show me</div>)}

//or
{this.show? (<div>show </div>):(<div>hide </div>)}

// v-for
{
      this.arr.map(item=>{
            return (<p key={item.id}>{item.name}</p>)
      })
}

v-on="$listeners" 和 v-bind="$attrs"

可以用{props: ...this.$attrs, on: ...this.$listeners} 代替

render(){
      return <div {...{props: ...this.$attrs, on: ...this.$listeners}}></div>
}

filters過濾器

這個只能通過函數來調用，如果定義了全局的過濾器，可以通過 this.$options.filters拿到對應的過濾函數

自定義指令

定義一個數組對象，存儲對應的指令，然後通過展開符傳入

function itemRender(item){
      let directives = [{name: 'lazy, value: item.src} ];
      return <div {...directives}></div>
}

slot

slot插槽主要分為兩種情況：具名插槽，作用域插槽

定義插槽

可通過 this.$slots.xxx 或者 this.$scopedSlots.xxx 定義slot

render(){
      return (<div>{this.$slots.default}</div>)
  //  return (<div>{this.$scopedSlots&&this.$scopedSlots.default()}</div>)
}

注意： $slots 和 $scopedSlots 的區別在於 ，前者是對象，後者是函數，在調用函數之前要先判斷該函數是否存在

使用插槽

具名的插槽可以通過slot="xxx"來使用，作用域的插槽要通過對象來調用

render(){
      const scopedSlots = {
            default:(data)=>{return <span>scoped slot</span>}
      }
      return (<div scopedSlots ={scopedSlots}>
      <template slot="default"><span>default slot</span></template>
</div>)

}