用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. Youll 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的编写从驼峰式改为连接符：

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

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

<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的数据格式使用自定义指令：

const directives = [ {  name: my-dir, value: 123, modifiers: {  abc: true } } ] return <div { ...{  directives }}/>  

扩展

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

相关链接：

babel-plugin-transform-vue-jsx(https://github.com/vuejs/babel-plugin-transform-vue-jsxhttps://github.com/vuejs/babel-plugin-transform-vue-jsx) 

很赞哦!（3）