vue jsx 重构项目 jsx

配置

安装依赖

npm install babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx

添加.babelrc文件

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

一些语法变化

自定义事件$emit

// To trigger the event you need to something like:
  <a onClick={(e: any) => this.$emit('test')}>
            {this.$slots.default}
        </a>
// To listen to the event:
<NavLink onTest={() => alert('clicked')}>
            <i class='fa fa-bars'></i>
        </NavLink>

v-*

在jsx里面引入vue模版组件，这里没有什么要注意的，除了连接符式的属性要转换成驼峰式，还有一个需要注意的是指令，如果用了jsx，那么内置的指令都不会生效（除了v-show），好在内置指令大部分都可以用jsx描述。

属性props

设置 functional: true,点击查看 函数式组件

class类名

这样渲染的类只有foo,而没有bar

 class={{ foo: true, bar: false }}

--
作者：刘伟波

链接：http://www.liuweibo.cn/p/244

来源：刘伟波博客

本文原创版权属于刘伟波 ，转载请注明出处，谢谢合作