其實一直想繞過jsx，原計劃是先在react里面帶大家用上jsx，vue里面就不涉及了。昨天經(jīng)過一番折騰，實在是在vue組件的<template>里面不能很滿意的實現(xiàn)想要的效果，其實我對自己和大家的要求不高，只是說咱們的代碼在完成其功能的前題下，要容易閱讀，易于理解。
在實現(xiàn)Tab組件的時候，我覺得自己不能達到這個要求，在參考了各種源碼后，終于還是決定在項目中使用jsx。
jsx的視頻已經(jīng)發(fā)給大家（也可以在react合集里面找到），雖然是在react的環(huán)境下但是區(qū)別不大，大家先看一下，掌握基本用法，后面用的多了，就沒有障礙了。
一、vue 項目引入 jsx 支持
這個官方文檔有詳細的說明，可以直接查閱，下面簡單記錄下
// 安裝依賴npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev// 配置 babel，如果沒有就新建 .babelrc 文件{ "presets": ["@vue/babel-preset-jsx"]}
二、vue 組件的寫法的變化
一個 vue 組件，其中要求 <template> 標簽和 render() 方法二選一，在使用 render() 的時候，其實文件名都可以改為 .js 形如下面的樣子
// tabs.jsexport default { data() { return {} }, mounted() {}, methods: {}, render(h) {} ...}
但是，我們的 Tab 組件還是有一些樣式要考慮的，上面這樣的方式就不方便了，改為如下的形式：
// tabs.vue<script>export default { data() { return {} }, mounted() {}, methods: {}, render(h) {} ...}</script><style lang="sass" scoped></style>
這樣我們就兼顧了 render() 和我們的樣式
三、用 jsx 的方式實現(xiàn)我們之前的 tab組件結構
如上圖，這是我們改造前組件的 <template> 中的結構，現(xiàn)在修改成 jsx 的方式，如下圖
具體的實現(xiàn)過程，這里就不重復說了，分享的時候已經(jīng)很仔細的帶大家做了，這里要提醒大家注意的是 children 還有 jsx 的各種寫法。
四、組件用法
組件完成后，我們就可以在需要的地方很簡便的使用了，因為是參考 Element 的 api，所以大家用起來也會比較自然
和 Element 的 tab 組件一樣，一個 v-model 指定被激活的 tab，<Tab> 組件的 label 屬性設置 tab 標簽上的文字，<Tab> 組件中的內容，就是 tab 標簽頁對應的主體內容，<Tab> 的 name 屬性用于區(qū)分不同的 tab。
上圖中的按鈕是我做的一個實驗，為了證明按鈕的事件可以被調用。
<Tab> 組件的內容沒有貼出來，很簡單，就是一個 li，按 Bulma 的要求寫就行。
END
