vue的jsx写法记录

通过本文, 你可以学到一些vue中jsx的语法。

vue更加推荐使用模板开发组件，但是在一些基础组件开发中，为了获取js的完全编程能力，不可避免需要使用一些jsx语法，而官方vue jsx对vue特有的语法糖这方面的文档特别少， 本文记录一些本人在开发过程中使用jsx的经验和思考。

整体上来看，由于vue的createElement跟react的createElement有区别,导致jsx的写法也有一些区别.但整体上还是符合react的jsx,react jsx进阶的语法。

如果需要了解vue jsx特殊写法的原理，可以阅读babel-plugin-transform-vue-jsx , 本文不做探讨。

data写法

jsx本质上是createElement的语法糖，最终会被编译器转为createElement函数.当在jsx的标签中使用{ ...obj }时, obj将会编译为createElement的第二个参数.

vue的createElement跟react的createElement函数第二个参数意义是不一样的.在vue中,第二个参数是 data对象, 而react第二个参数是props。所以本人将这种方式称为data写法。

如在vue中需要设置动态属性时:

const props={
  name: 'joyer',
},

<my-button {...{
  props:props,
}}></my-button>

当不知道模板中某个vue语法怎么用jsx中实现时,可以先转换为createElement的data对象,然后使用{...data}写在jsx标签上(本文重点).

如官方推荐原生dom属性的jsx写法:

<button domPropsType="submit"><button>

采用data