JSX 语法

一、安装依赖

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

在 babel.config.js 文件添加如下信息：

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

您可以切换特定功能，默认情况下，所有功能（除外compositionAPI）均已启用：

module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        vModel: false,
        compositionAPI: true,
      },
    ],
  ],
}

更多细节，请查看：JSX 配置信息。

二、如何使用呢？

1.添加动态内容

render() {
  return <p>hello { this.message }</p>
}

2.引入组件

import MyComponent from './my-component'
export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

3.动态绑定属性

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

4.展开运算符（对象需要与Vue Data Object兼容）

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }
  return <input {...{ attrs: inputAttrs }} />
}

5.命名插槽

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

6.作用域插槽

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }
  return <MyComponent scopedSlots={scopedSlots} />
}

7.指令

<input vModel={this.newTodoText} />
<input vOn:click={this.newTodoText} />

8.v-html

<p domPropsInnerHTML={html} />

9.函数式组件

export default ({ props }) => <p>hello {props.message}</p>
// 或者声明大写变量
const HelloWorld = ({ props }) => <p>hello {props.message}</p>