JSX in Vue.js

December 13, 2017

在基于 Webpack 的 Vue 项目中添加 JSX 支持:

$ yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --dev

各依赖的作用:

  • babel-plugin-syntax-jsx 提供基础的 JSX 语法转换
  • babel-plugin-transform-vue-jsx 提供基于 Vue 的 JSX 特殊语法
  • babel-helper-vue-jsx-merge-props 是可选的,提供对类似 <comp {...props}/> 写法的支持

然后在 .babelrc 中,增加:

{
  ...
  "plugins": [
    "transform-vue-jsx",
    ...
  ]
  ...
}

注意如果有其它 env 也要如此加上 transform-vue-jsx 插件。

Difference from React JSX

render (h) {
  return (
    <div
      id="foo"
      domPropsInnerHTML="bar"
      onClick={this.clickHandler}
      nativeOnClick={this.nativeClickHandler}
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px' }}
      key="key"
      ref="ref"
      refInFor
      slot="slot">
    </div>
  )
}

需要注意的是,事件绑定中,还有另外一个跟 react 不一样的地方:onMouseEnter 是不起作用的,只能写 onMouseenter 或者 on-mouseenter,以此类推。

Vue directives

除了 v-show 以外,所有的内置指令都不能在 JSX 中工作。

自定义指令可以使用 v-name={value} 的写法,但是这样会缺少修饰符以及参数。如果需要完整的指令功能,可以这么做:

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

return <div {...{ directives }}/>


Loading Disqus......