使用JSX写Vue组件(2)

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

上文# 使用JSX写Vue组件(1) 简述了 JSX 是什么，以及在 Vue 使用的原因，本文简单介绍在 Vue 使用 JSX 的一些事项:

Vue 2.x & Babel 6.x

需安装相关 Babel 依赖： babel-plugin-transform-vue-jsx，等等

Babel plugin for Vue 2.0 JSX

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

babel 配置（.babelrc 或 babel.config.js）

"plugins": ["transform-vue-jsx"]

注意事项

• prop 属性 propName = {value}

• 除 v-show 外，基本内置的 Vue 指令都不被支持

• v-model 可选择重写，input 的 input 或 change 事件，可以选择安装 babel-plugin-jsx-v-model

  修改 babel 配置为：

  "plugins": ["jsx-v-model", "transform-vue-jsx"]
  

• 对于事件绑定或自定义指令的绑定，可以通过对象传递，如上篇例子：

  const events = { on: { click: (e) => console.log(e) } }; 
  return (<div> 
      <el-button type="info" {...events}> Hello JSX </el-button> 
  </div> );
  

Vue 2.x & Babel 7.x

@vue/babel-preset-jsx

此时，在 Vue 中使用 JSX 语法，同样需要一个 Babel 插件：@vue/babel-preset-jsx

（Babel preset 理解为 Babel Plugin 的集合）

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

babel配置为:

presets: ["@vue/babel-preset-jsx"]

@vue/babel-preset-app

若是基于 @vue/cli 4.x，可见# @vue/cli-浏览器兼容性

一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

This is the default Babel preset used in all Vue CLI projects.（@vue/babel-preset-app）

其中集成了：

@babel/plugin-syntax-jsx
@vue/babel-preset-jsx  // (见上)

即提供了 Vue 中使用 JSX 的支持，另可配置禁用JSX支持

语法糖

@vue/babel-preset-jsx 提供了新的语法糖，如下

1、v-on：vOn，@vue/babel-sugar-v-on

babel配置：plugins: ["@vue/babel-sugar-v-on"]

vOn:change={handleChange}

vOn:click={(e) => handleClick(e, this.current)}

2、v-model：vModel，@vue/babel-sugar-v-model

babel配置：plugins: ["@vue/babel-sugar-v-model"]

vModel_trim={this.current}

3、函数式组件：functional，@vue/babel-sugar-functional-vue

往日旧文：可以看看 # 不完全笔记之Vue2.x函数式组件

babel配置：plugins: ["@vue/babel-sugar-functional-vue"]

functional: true,
render: (h, ctx) => <div vOn:click={ctx.listeners.click}>{ctx.props.msg}</div>

4、h：JSX 中自动注入 h 的语法糖， @vue/babel-sugar-inject-h

babel配置：plugins: ["@vue/babel-sugar-inject-h"]

不必明确地将 h 声明为 render() 函数中的首个参数：render(h) ---> render()

Vue 3.x

具体可详见 @vue/babel-plugin-jsx

Babel Plugin JSX for Vue 3.0

（后续有输入再继续输出~）

链接传送门

# 如何在Vue项目中使用JSX？

# 学会使用Vue JSX，一车老干妈都是你的

# 为什么我推荐使用JSX开发Vue3

Last but not least

如有不妥，请多指教~