vue jsx寫法筆記

jsx語法不是很常用，部分語法和平時寫template有點不太一樣，用到的時候可能會忘記，官網的文件又特別簡單，這裡整理一下常用的一些語法含義，方便以後使用。

vue的jsx基礎外掛程式依賴（高版本cli已經自帶，無需再次安裝了）。

下面對一些template轉為jsx語法時的一些比較好的方式進行記錄：

諸如 innerhtml href title 等等，bom環境的標籤屬性需要加個domprops字首。

render ()

jsx語法：

render() 
)}

content2

content3

jsx用三元表達符替代（目前想到最好的方法）：

render() 
)}

jsx語法（和官方文件一致）

render() ))}
)}

i am the other slot

slot 是掛在 this.$slots 的這個屬性上的，this.$slot['property'] 可以直接拿到 slot 的 vnode

render()

)} // main.vue

render()

scopedslot 是掛在 this.$scopedslots 的這個屬性上的，this.$scopedslots['property'] 可以直接拿到乙個函式，這個函式的引數就是 scopeslots 外傳的資料，返回值是 vnode.

所以，jsx 中，通過訪問 this.$scopedslots 來代替 slot 的定義，通過傳遞 scopedslots 屬性來使用 scopedslots.

render() )})

} // main.vue

render() ) =>)}

}}}>

)}

event-emitter 這個元件會 emit 4個事件 click, click-two, test-event, test-event-two, camelcaseevent. 使用 template 時，我們用 v-on，或者其縮寫 @, 來監聽事件.

使用 jsx 時，情況比較多：

使用 on-[eventname] 格式, 比如 on-click-two, on-click, on-camelcaseevent

使用 on[eventname] 格式，比如 onclick, oncamelcaseevent。click-two 需要這樣寫 onclick-on， onclicktwo 是不對的。

使用 spread 語法，即 }}

render ()

這裡的**只是為了展示，這樣的場景，全部都寫在 spread 語法裡，最為簡潔。我建議，如果事件多就使用 spread 語法，如果少就使用 on-[eventname] 的格式來寫。on[eventname] 格式很奇怪容易搞錯，最好不要用。

所以jsx很簡單：

render()  }
>
)}

或者使用 babel-plugin-jsx-v-model外掛程式，就可以跟普通寫法一樣。

render()

sync同理，babel-plugin-vue-jsx-sync外掛程式來處理 sync 修飾符，外掛程式寫法略有不同：

render()

還有乙個babel-plugin-jsx-event-modifiers外掛程式，可以處理處理 .ctrl, .alt, .shift 等事件語法糖，具體可以檢視文件，這裡要感謝作者nickmessing


<-- /> -->
export default 
},methods: 
}}

// parent.vue
// 沒有宣告props
render() 
// child.vue
export default )},
methods: 
}}