通过本文, 你可以学到一些
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