在Vue2中JSX的使用集锦

Vue2安装JSX支持

有时候，我们使用渲染函数（render function）来抽象组件，而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大，体验不佳，这个时候就派 JSX 上场了。然而在Vue3中默认是带了JSX支持的，而在 Vue2 中使用 JSX，需要安装并使用 Babel 插件：

• @vue/babel-preset-jsx
• @vue/babel-helper-vue-jsx-merge-props

安装脚本

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

配置.babelrc文件

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

template和JSX的使用差异

针对方向

变量绑定

变量绑定由data中的数据由 v-model="value"变为 v-model={this.value}

template语法

JSX语法

事件绑定

变量绑定由data中的数据由 @input="inputChange"或v-on:input="inputChange"变为 onInput={this.inputChange}或on-input={this.inputChange}

template语法

JSX语法

条件渲染

条件渲染由 v-if变为插入JSX 语句段

template语法

JSX语法

{
    if(this.show){
        return 
    }
}

列表渲染

变量绑定由data中的数据由 v-for变为插入JSX 语句段

template语法

JSX语法

    {
        this.options.map(item =>{
            return (
                
                
            )
        }
    
    }

插槽的使用

命名插槽

组件名称：BaseLayout
template语法

JSX语法
注意：$slots在Vue2.6版本起才支持，在之前使用的是$slotScopeds

  

    {
        //具名插槽
        this.$slots.header
    }
  
  

    {
        //匿名插槽
        this.$slots.default
    }
    {
        //作用域插槽
       () => this.$slots.main(this.mainData)
    }
  
  

    {
        //具名插槽
        this.$slots.footer
    }
  

使用插槽

template语法

JSX语法

    {{
      default: () => 
匿名插槽
,
      header: () => 
我是头部
,
      main: (mainData) => 
作用域插槽：{mainData}
,
      footer: () => 
具名插槽
    }}

JSX中el-form

el-form需要绑定通过props={{ model:this.form}}来绑定form对象，不能使用model={this.form} ，否则就会出现报错Invalid handler for event “input“: got undefined

render(h){
    return (
        
        
    )
}