JSX 使用理由

每个组件上都有一个render函数,其写法是this.$createElement('div', {}, [...]),非常的不直观，JSX可以改进这种写法，使其更加直观方便。

注意: 如果在组件上定义了render方法，则Vue将忽略template定义。因为 template最终还是需要编译成render的格式。

啥叫 JSX 呢

JSX 是 JavaScript 的类似 XML 的语法扩展，没有任何定义的语义。

通过babel将JSX转成JS。简单来说呢，JSX就是在JS中写类似HTML的语法。

如果使用的Vue-cli大于或等于 3.0 版本，那么就直接可以使用JSX的语法了。

在 Vue 中使用 JSX 需要注意的地方

  • 要监听JSX中的事件，我们需要“on”前缀。 例如，将onClick用于单击事件。
render (createElement) {
    return (
        <button onClick={this.handleClick}></button>
    )
}
  • 绑定变量，注意这里不是使用:
render (createElement) {
    return (
        <button content={this.generatedText}></button>
    )
}
  • 将HTML字符串设置为元素的内容，使用domPropsInnerHTML而不是使用v-html
render (createElement) {
    return (
        <button domPropsInnerHTML={htmlContent}></button>
    )
}
  • 我们也可以展开一个大对象：
render (createElement) {
    return (
        <button {...this.largeProps}></button>
    )
}

导入 JSX 组件

在Vue中使用JSX的另一个好处是，我们不再需要注册所需的每个组件。 我们只是导入和使用。组件的正常使用是需要注册的。

import { Button } from "../components";

export default {
  render(createElement) {
    return <Button primary={true}>Edit</Button>;
  },
};