前言

創(chuàng)新互聯(lián)是一家專業(yè)提供文水企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為文水眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進行中。

本文主要給大家介紹的是關(guān)于利用jsx寫vue組件，下面話不多說，來一起看看詳細(xì)的介紹吧。

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

下面我們要講的是如何在vue里面寫jsx，知道react的人應(yīng)該都知道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語法轉(zhuǎn)換。

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

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

render (h) {
 return (
 

 
 )
}

可以看到DOM屬性要加domProps前綴，但這里lass和style卻不需要，因為這兩個是特殊的模塊，而且react的class用的是className，vue卻用的class。事件監(jiān)聽是以“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'
 })
}

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

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

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

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

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

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

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

擴展

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

相關(guān)鏈接：

babel-plugin-transform-vue-jsx

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。