在Vue中使用JSX作为render

最新推荐文章于 2025-03-06 17:44:00 发布

哈哈hyc

最新推荐文章于 2025-03-06 17:44:00 发布

阅读量1.5k

点赞数 1

分类专栏：前端前端——vue 文章标签： jsx vue 前端语法糖

本文链接：https://blog.youkuaiyun.com/erdfty/article/details/108623826

版权

ant-design-vue开源了一段时间后，收到了一些反馈，尤其是Form组件上线后，很多用户对JSX的使用感到迷惑和不习惯，为此专门介绍下Vue JSX的使用姿势及注意事项。

Form组件的自动收集校验功能需要在JSX下使用，当然如果不需要自动收集校验，你依然可以使用template

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，就需要使用 render 函数，它比 template 更接近编译器。但是复杂的render函数书写异常痛苦，好在官方提供了一个 Babel 插件，可以将更接近于模板语法的JSX转译成JavaScript。

使用过React的同学对JSX肯定不陌生，但是Vue的JSX写法和React的还是有一些区别。

React中父子之间传递的所有数据都是属性，即所有数据均挂载在`props`下（style, className, children, value， onChange等等）。

Vue则不然，仅仅属性就有三种：组件属性props，普通html属性attrs，Dom属性domProps。

接下来我们通过一个示例来详细解释他们的区别：本文代码可在codesandbox查看运行

const ButtonCounter = {
  name: "button-counter",

  props: ["count"],

  methods: {
    onClick() {
      this.$emit("change", this.count + 1);
    },
  },

  render()