Vue3 中如何使用 JSX语法?

16 min read

在Vue3中使用JSX语法需要以下步骤：

  1. 添加依赖：在项目中安装@vue/babel-plugin-jsx插件和@vue/babel-preset-jsx预设。
npm install --save-dev @vue/babel-plugin-jsx @vue/babel-preset-jsx
  1. 创建.babelrc文件并配置：
{
  "presets": [
    ["@vue/babel-preset-jsx", {
      "injectH": false
    }]
  ]
}
  1. 创建一个Vue组件并在script标签中引入并使用jsx方法进行编写：
<script>
import { jsx } from '@vue/runtime-core'

export default {
  render() {
    // 使用jsx编写组件的template部分
    return <div>{this.message}</div>
  },
  data() {
    return {
      message: 'Hello Vue3!'
    }
  }
}
</script>

这样就可以在Vue3中使用JSX语法进行开发了。需要注意的是，在JSX中使用Vue指令时，需要将指令名称写成驼峰形式，例如v-bind写成vBind，v-on写成vOn等。另外，需要使用this来引用组件实例中的数据和方法。