前言

本文主要給大家介紹的是關于利用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

<script>export default { props: ['onClick', 'isShow'],  data() {  return {   test: 123  }; },  render() {  return (   <div class="test" onClick={ this.onClick }>    { this.test }    { this.isShow + '' }   </div>  ); }}</script>

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

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

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

render (h) { return ( <div  // normal attributes or component props.  id="foo"  // DOM properties are prefixed with `domProps`  domPropsInnerHTML="bar"  // event listeners are prefixed with `on` or `nativeOn`  onClick={this.clickHandler}  nativeOnClick={this.nativeClickHandler}  // other special top-level properties  class={{ foo: true, bar: false }}  style={{ color: 'red', fontSize: '14px' }}  key="key"  ref="ref"  // assign the `ref` is used on elements/components with v-for  refInFor  slot="slot"> </div> )}

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

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

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

render (h) { return h('div', { // Component props props: {  msg: 'hi' }, // 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' })}