用jsx寫vue組件

前言

我們平常寫vue的組件時，一般都是用的是模版，這種方式看起來比較簡潔，而且vue作者也推薦使用這個方式，但是這種方式也有一些它的弊端，例如模版調試麻煩，或者在一些場景下模版描述可能沒那麼簡單和方便。

下面我們要講的是如何在vue裡面寫jsx，知道react的人應該都知道jsx，jsx的一個特性就是非常靈活，雖然有的人覺得jsx很醜陋，把邏輯都寫到模版的感覺，但蘿蔔青菜各有所愛，適合自己適合團隊的就是最好的。

在使用jsx之前我們需要安裝一個babel插件（babel-plugin-transform-vue-jsx ）

安裝方式：

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-es2015 --save-dev

然後再.babelrc裡面添加：

{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"] }

接著我們就可以愉快地在vue裡面編寫jsx了。

Test.vue

可以看到我們把jsx寫在了render方法裡面，render方法是vue2.0才支持的，用來提供對虛擬DOM的支持，也就是說只有vue2.0才支持jsx語法轉換。

這裡要注意的一點是vue裡面編寫jsx和在react裡面的jsx語法還是有一點不一樣的。

一下是一段覆蓋大部分語法的vue jsx代碼：

可以看到DOM屬性要加domProps前綴，但這裡lass和style卻不需要，因為這兩個是特殊的模塊，而且react的class用的是className，vue卻用的class。事件監聽是以「on」或者「nativeOn」為開始。

實際上vue2.0的模版最後都會被編譯為render方法，所以模版聲明的組件和jsx聲明的組件最後都是一樣的。

上面的jsx最後會被編譯成下面這樣：

render (h) { return h( div , // normal HTML attributes attrs: { id: foo }, // DOM props domProps: { innerHTML: bar }, // Event handlers are nested under "on", though // modifiers such as in v-on:keyup.enter are not // supported. You ll have to manually check the // keyCode in the handler instead. on: { click: this.clickHandler }, // For components only. Allows you to listen to // native events, rather than events emitted from // the component using vm.$emit. nativeOn: { click: this.nativeClickHandler }, // class is a special module, same API as `v-bind:class` class: { foo: true, bar: false }, // style is also same as `v-bind:style` style: { color: red , fontSize: 14px }, // other special top-level properties key: key , ref: ref , // assign the `ref` is used on elements/components with v-for refInFor: true, slot: slot }) }

這也意味著兩種形式的組件是可以相互引用的。

有時候我們難免會在模版里引入jsx編寫的vue組件或者在jsx編寫的vue組件里引入模版組件，這裡還是有些需要注意的事項：

1.在模版裡面引入jsx的組件，可以通過components引用，另外props的編寫從駝峰式改為連接符：

components: { Test }, data() { return { msg: Welcome to Your Vue.js App , show: true }; }, methods: { clickHandler(){ this.show = !this.show; } } };

2.在jsx裡面引入vue模版組件，這裡沒有什麼要注意的，除了連接符式的屬性要轉換成駝峰式，還有一個需要注意的是指令，如果用了jsx，那麼內置的指令都不會生效（除了v-show），好在內置指令大部分都可以用jsx描述。那麼自定義指令要怎麼用呢？

自定義指令可以使用「v-name=」語法，如果要支持指令參數和modifier可以用「v-name={{ value, modifier: true }}」語法：

import Vue from vue ; Vue.directive( my-bold , { inserted: function (el) { el.style.fontWeight = 900; } }) export default { props: [ onClick , isShow ], data() { return { test: 123 }; }, methods: { afterLeave() { console.log( afterLeave ) } }, render() { const directives = [ { name: my-bold , value: 666, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 }

我們還可以用原生vnode的數據格式使用自定義指令：

const directives = [ { name: my-dir , value: 123, modifiers: { abc: true } } ] return

擴展

如果有人覺得在vue組件裡面要寫data，props，computed和methods不夠優雅，可以參考下這個插件vue-class-component，它能讓你使用ES6的class和ES7的裝飾器編寫vue組件。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！