用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

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

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

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

 
 
 
 
  
  
  
  render (h) { 
  
  
  
   
  
  
  
    return ( 
  
  
  
   
  
  
  
      
  
  
  
  
 
  
  
  
        // 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">

)

}

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

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

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

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

扩展

如果有人觉得在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)

网页题目：用Jsx写Vue组件
标题来源：http://www.shufengxianlan.com/qtweb/news4/318454.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联