关于前端:在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 语法

<el-input v-model="value" />

JSX 语法

<el-input v-model={this.value} />

事件绑定

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

template 语法

<el-input v-model="value" @input="inputChange" v-on:click="inputClick" />

JSX 语法

<el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} />

条件渲染

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

template 语法

<el-input v-model="value" v-if="show" @input="inputChange" v-on:click="inputClick" />

JSX 语法

{if(this.show){return <el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} />
    }
}

列表渲染

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

template 语法

<el-select v-model={this.form.formula} clearable>
    <el-option
        v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.label">
      </el-option>
</el-select>

JSX 语法

<el-select v-model={this.form.formula} clearable>
    {
        this.options.map(item =>{
            return (
                <el-option
                 key={item.value}
                 label={item.label}
                 value={item.value}>
                </el-option>
            )
        }
    
    }
</el-select>

插槽的应用

命名插槽

组件名称：BaseLayout
template 语法

<div class="container">
  <header>
     <!-- 具名插槽  -->
    <slot name="header"></slot>
  </header>
  <main>
      <!-- 匿名插槽  -->
    <slot></slot>
    <!-- 作用域插槽  -->
    <slot :main="mainData"></slot>
  </main>
  
  <footer>
      <!-- 具名插槽  -->
    <slot name="footer"></slot>
  </footer>
</div>

JSX 语法
留神：$slots 在 Vue2.6 版本起才反对，在之前应用的是 $slotScopeds

<div class="container">
  <header>
    {
        // 具名插槽
        this.$slots.header
    }
  </header>
  <main>
    {
        // 匿名插槽
        this.$slots.default
    }
    {
        // 作用域插槽
       () => this.$slots.main(this.mainData)
    }
  </main>
  <footer>
    {
        // 具名插槽
        this.$slots.footer
    }
  </footer>
</div>

应用插槽

template 语法

<base-layout>
  <template #header>
      <div> 我是头部 </div>
  </template>
  <template #default>
      <div> 匿名插槽 </div>
  </template>
  <!-- vue2.6 之后应用形式 -->
  <template #main="mainData">
      <div> 作用域插槽：{{mainData}}</div>
  </template>
  <!-- vue2.6 之前应用 -->
  <template slot="main" slot-scope="mainData">
      <div> 作用域插槽：{{mainData}}</div>
  </template>
  <template #footer>
      <div> 具名插槽 </div>
  </template>
</base-layout>

JSX 语法

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

JSX 中 el-form

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

render(h){
    return (
        <el-form
            ref="elForm"
            class="rule-form"
            props={{model:this.form}} >
        </el-form>
    )
}