用Jsx写Vue组件

前言

我们平常写vue的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且vue作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。

下面我们要讲的是如何在vue里面写jsx，知道react的人应该都知道jsx，jsx的一个特性就是非常灵活，虽然有的人觉得jsx很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。

在使用jsx之前我们需要安装一个babel插件(babel-plugin-transform-vue-jsx )

安装方式：

1. npm install\ 
2.  
3.   babel-plugin-syntax-jsx\ 
4.  
5.   babel-plugin-transform-vue-jsx\ 
6.  
7.   babel-helper-vue-jsx-merge-props\ 
8.  
9.   babel-preset-es2015\ 
10.  
11.   --save-dev  

然后再.babelrc里面添加：

1. { 
2.  
3. "presets": ["es2015"], 
4.  
5. "plugins": ["transform-vue-jsx"] 
6.  
7. }  

接着我们就可以愉快地在vue里面编写jsx了。

Test.vue

1. <script> 
2.  
3. export default { 
4.  
5.     props: ['onClick', 'isShow'], 
6.  
7.     data() { 
8.  
9.         return { 
10.  
11.             test: 123 
12.  
13.         }; 
14.  
15.     }, 
16.  
17.     render() { 
18.  
19.         return ( 
20.  
21.             <div class="test" onClick={ this.onClick }> 
22.  
23.                 { this.test } 
24.  
25.                 { this.isShow + '' } 
26.  
27.             </div> 
28.  
29.         ); 
30.  
31.     } 
32.  
33. } 
34.  
35. </script>  

可以看到我们把jsx写在了render方法里面，render方法是vue2.0才支持的，用来提供对虚拟DOM的支持，也就是说只有vue2.0才支持jsx语法转换。

这里要注意的一点是vue里面编写jsx和在react里面的jsx语法还是有一点不一样的。

一下是一段覆盖大部分语法的vue jsx代码：

1. render (h) { 
2.  
3.   return ( 
4.  
5.     <div 
6.  
7.       // normal attributes or component props. 
8.  
9.       id="foo" 
10.  
11.       // DOM properties are prefixed with `domProps` 
12.  
13.       domPropsInnerHTML="bar" 
14.  
15.       // event listeners are prefixed with `on` or `nativeOn` 
16.  
17.       onClick={this.clickHandler} 
18.  
19.       nativeOnClick={this.nativeClickHandler} 
20.  
21.       // other special top-level properties 
22.  
23.       class={{ foo: true, bar: false }} 
24.  
25.       style={{ color: 'red', fontSize: '14px' }} 
26.  
27.       key="key" 
28.  
29.       ref="ref" 
30.  
31.       // assign the `ref` is used on elements/components with v-for 
32.  
33.       refInFor 
34.  
35.       slot="slot"> 
36.  
37.     </div> 
38.  
39.   ) 
40.  
41. }  

可以看到DOM属性要加domProps前缀，但这里lass和style却不需要，因为这两个是特殊的模块，而且react的class用的是className，vue却用的class。事件监听是以“on”或者“nativeOn”为开始。

实际上vue2.0的模版最后都会被编译为render方法，所以模版声明的组件和jsx声明的组件最后都是一样的。

上面的jsx最后会被编译成下面这样：

1. render (h) { 
2.  
3.   return h('div', { 
4.  
5.     // Component props 
6.  
7.     props: { 
8.  
9.       msg: 'hi' 
10.  
11.     }, 
12.  
13.     // normal HTML attributes 
14.  
15.     attrs: { 
16.  
17.       id: 'foo' 
18.  
19.     }, 
20.  
21.     // DOM props 
22.  
23.     domProps: { 
24.  
25.       innerHTML: 'bar' 
26.  
27.     }, 
28.  
29.     // Event handlers are nested under "on", though 
30.  
31.     // modifiers such as in v-on:keyup.enter are not 
32.  
33.     // supported. You'll have to manually check the 
34.  
35.     // keyCode in the handler instead. 
36.  
37.     on: { 
38.  
39.       click: this.clickHandler 
40.  
41.     }, 
42.  
43.     // For components only. Allows you to listen to 
44.  
45.     // native events, rather than events emitted from 
46.  
47.     // the component using vm.$emit. 
48.  
49.     nativeOn: { 
50.  
51.       click: this.nativeClickHandler 
52.  
53.     }, 
54.  
55.     // class is a special module, same API as `v-bind:class` 
56.  
57.     class: { 
58.  
59.       foo: true, 
60.  
61.       bar: false 
62.  
63.     }, 
64.  
65.     // style is also same as `v-bind:style` 
66.  
67.     style: { 
68.  
69.       color: 'red', 
70.  
71.       fontSize: '14px' 
72.  
73.     }, 
74.  
75.     // other special top-level properties 
76.  
77.     key: 'key', 
78.  
79.     ref: 'ref', 
80.  
81.     // assign the `ref` is used on elements/components with v-for 
82.  
83.     refInFor: true, 
84.  
85.     slot: 'slot' 
86.  
87.   }) 
88.  
89. }  

这也意味着两种形式的组件是可以相互引用的。

有时候我们难免会在模版里引入jsx编写的vue组件或者在jsx编写的vue组件里引入模版组件，这里还是有些需要注意的事项：

1.在模版里面引入jsx的组件，可以通过components引用，另外props的编写从驼峰式改为连接符：

1. <template> 
2.  
3.   <div class="wrapper"> 
4.  
5.     <Test :on-click="clickHandler" :is-show="show"></Test> 
6.  
7.   </div> 
8.  
9. </template> 
10.  
11. <script> 
12.  
13. import Test from './Test.vue'; 
14.  
15. export default { 
16.  
17.   name: 'hello', 
18.  
19.   components: { 
20.  
21.     Test 
22.  
23.   }, 
24.  
25.   data() { 
26.  
27.     return { 
28.  
29.       msg: 'Welcome to Your Vue.js App', 
30.  
31.       show: true 
32.  
33.     }; 
34.  
35.   }, 
36.  
37.   methods: { 
38.  
39.     clickHandler(){ 
40.  
41.       this.show = !this.show; 
42.  
43.     } 
44.  
45.   } 
46.  
47. }; 
48.  
49. </script>  

2.在jsx里面引入vue模版组件，这里没有什么要注意的，除了连接符式的属性要转换成驼峰式，还有一个需要注意的是指令，如果用了jsx，那么内置的指令都不会生效(除了v-show)，好在内置指令大部分都可以用jsx描述。那么自定义指令要怎么用呢?

自定义指令可以使用“v-name={value}”语法，如果要支持指令参数和modifier可以用“v-name={{ value, modifier: true }}”语法：

1. <script> 
2.  
3. import Vue from 'vue'; 
4.  
5. Vue.directive('my-bold', { 
6.  
7.   inserted: function (el) { 
8.  
9.     el.style.fontWeight = 900; 
10.  
11.   } 
12.  
13. }) 
14.  
15. export default { 
16.  
17.     props: ['onClick', 'isShow'], 
18.  
19.     data() { 
20.  
21.         return { 
22.  
23.             test: 123 
24.  
25.         }; 
26.  
27.     }, 
28.  
29.     methods: { 
30.  
31.         afterLeave() { 
32.  
33.             console.log('afterLeave') 
34.  
35.         } 
36.  
37.     }, 
38.  
39.     render() { 
40.  
41.         const directives = [ 
42.  
43.             { name: 'my-bold', value: 666, modifiers: { abc: true } } 
44.  
45.         ]; 
46.  
47.         return ( 
48.  
49.             <transition onAfterLeave={this.afterLeave} name="fade"> 
50.  
51.                 <div class="test" onClick={this.onClick} v-show={ this.isShow } v-my-bold> 
52.  
53.                     {this.test} 
54.  
55.                     {this.isShow + ''} 
56.  
57.                 </div> 
58.  
59.             </transition> 
60.  
61.         ); 
62.  
63.     } 
64.  
65. } 
66.  
67. </script> 
68.  
69. <style> 
70.  
71. .fade-enter-active, .fade-leave-active { 
72.  
73.   transition: opacity .5s 
74.  
75. } 
76.  
77. .fade-enter, .fade-leave-to { 
78.  
79.   opacity: 0 
80.  
81. } 
82.  
83. </style>  

我们还可以用原生vnode的数据格式使用自定义指令：

1. const directives = [ 
2.  
3. { name: 'my-dir', value: 123, modifiers: { abc: true } } 
4.  
5. ] 
6.  
7. return <div {...{ directives }}/>  

扩展

如果有人觉得在vue组件里面要写data，props，computed和methods不够优雅，可以参考下这个插件vue-class-component，它能让你使用ES6的class和ES7的装饰器编写vue组件。

作者：佚名

来源：51CTO