用jsx写vue组件
In Web开发 on 2017年07月17日 by view: 3,655
1

前言

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

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

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

然后再.babelrc里面添加:

接着我们就可以愉快地在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最后会被编译成下面这样:

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

有时候我们难免会在模版里引入jsx编写的vue组件或者在jsx编写的vue组件里引入模版组件,这里还是有些需要注意的事项:
1.在模版里面引入jsx的组件,可以通过components引用,另外props的编写从驼峰式改为连接符:

2.在jsx里面引入vue模版组件,这里没有什么要注意的,除了连接符式的属性要转换成驼峰式,还有一个需要注意的是指令,如果用了jsx,那么内置的指令都不会生效(除了v-show),好在内置指令大部分都可以用jsx描述。那么自定义指令要怎么用呢?
自定义指令可以使用“v-name={value}”语法,如果要支持指令参数和modifier可以用“v-name={{ value, modifier: true }}”语法:

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

扩展

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

相关链接:
babel-plugin-transform-vue-jsx

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/07/12918/

  1. 业余草 2017 年 7 月 27 日

    写的很棒!学到了很多!

发表评论