用Jsx寫Vue組件
前言
我們平常寫vue的組件時(shí)，一般都是用的是模版，這種方式看起來(lái)比較簡(jiǎn)潔，而且vue作者也推薦使用這個(gè)方式，但是這種方式也有一些它的弊端，例如模版調(diào)試麻煩，或者在一些場(chǎng)景下模版描述可能沒那么簡(jiǎn)單和方便。
下面我們要講的是如何在vue里面寫jsx，知道react的人應(yīng)該都知道jsx，jsx的一個(gè)特性就是非常靈活，雖然有的人覺得jsx很丑陋，把邏輯都寫到模版的感覺，但蘿卜青菜各有所愛，適合自己適合團(tuán)隊(duì)的就是***的。
在使用jsx之前我們需要安裝一個(gè)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才支持的，用來(lái)提供對(duì)虛擬DOM的支持，也就是說只有vue2.0才支持jsx語(yǔ)法轉(zhuǎn)換。
這里要注意的一點(diǎn)是vue里面編寫jsx和在react里面的jsx語(yǔ)法還是有一點(diǎn)不一樣的。
一下是一段覆蓋大部分語(yǔ)法的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卻不需要，因?yàn)檫@兩個(gè)是特殊的模塊，而且react的class用的是className，vue卻用的class。事件監(jiān)聽是以“on”或者“nativeOn”為開始。
實(shí)際上vue2.0的模版***都會(huì)被編譯為render方法，所以模版聲明的組件和jsx聲明的組件***都是一樣的。
上面的jsx***會(huì)被編譯成下面這樣：
- 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'
- })
- }
這也意味著兩種形式的組件是可以相互引用的。
有時(shí)候我們難免會(huì)在模版里引入jsx編寫的vue組件或者在jsx編寫的vue組件里引入模版組件，這里還是有些需要注意的事項(xiàng)：
1.在模版里面引入jsx的組件，可以通過components引用，另外props的編寫從駝峰式改為連接符：
- <template>
- <div class="wrapper">
- <Test :on-click="clickHandler" :is-show="show"></Test>
- </div>
- </template>
- <script>
- import Test from './Test.vue';
- export default {
- name: 'hello',
- components: {
- Test
- },
- data() {
- return {
- msg: 'Welcome to Your Vue.js App',
- show: true
- };
- },
- methods: {
- clickHandler(){
- this.show = !this.show;
- }
- }
- };
- </script>
2.在jsx里面引入vue模版組件，這里沒有什么要注意的，除了連接符式的屬性要轉(zhuǎn)換成駝峰式，還有一個(gè)需要注意的是指令，如果用了jsx，那么內(nèi)置的指令都不會(huì)生效(除了v-show)，好在內(nèi)置指令大部分都可以用jsx描述。那么自定義指令要怎么用呢?
自定義指令可以使用“v-name={value}”語(yǔ)法，如果要支持指令參數(shù)和modifier可以用“v-name={{ value, modifier: true }}”語(yǔ)法：
- <script>
- 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, modifiers: { abc: true } }
- ];
- return (
- <transition onAfterLeave={this.afterLeave} name="fade">
- <div class="test" onClick={this.onClick} v-show={ this.isShow } v-my-bold>
- {this.test}
- {this.isShow + ''}
- </div>
- </transition>
- );
- }
- }
- </script>
- <style>
- .fade-enter-active, .fade-leave-active {
- transition: opacity .5s
- }
- .fade-enter, .fade-leave-to {
- opacity: 0
- }
- </style>
我們還可以用原生vnode的數(shù)據(jù)格式使用自定義指令：
- const directives = [
- { name: 'my-dir', value: 123, modifiers: { abc: true } }
- ]
- return <div {...{ directives }}/>
擴(kuò)展
如果有人覺得在vue組件里面要寫data，props，computed和methods不夠優(yōu)雅，可以參考下這個(gè)插件vue-class-component，它能讓你使用ES6的class和ES7的裝飾器編寫vue組件。
相關(guān)鏈接：
babel-plugin-transform-vue-jsx(https://github.com/vuejs/babel-plugin-transform-vue-jsxhttps://github.com/vuejs/babel-plugin-transform-vue-jsx)
