如何在vue中使用jsx語法

更新時間：2022年07月27日 15:52:00 作者：楊柒柒

本文主要介紹了如何在vue中使用jsx語法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

為什么需要在vue中使用jsx

幾年前面試的時候，被問過這個問題，當時我一臉懵，這兩個東西為啥要混用呢？

直到后來，我遇到了這種場景。

tab切換展示組件，大部分組件展示表格，除了2個tab需要展示不同，這個不同，怎么處理呢?

當然可以直接改封裝的tab組件，v-if條件渲染嘛
那如果后面再有其他需求，tab組件繼續(xù)寫if么
這個時候，組件就過于冗余啦
那怎么讓組件統(tǒng)一處理呢？當然可以用render函數來抽象組件啦

render函數寫法有多惡心，想必大家都知道 => 不知道的看段簡單的ul,li布局

with(this){  // this 就是 vm
  return _c(
      'div',
      {
          attrs:{"id":"app"}
      },
      [
          _c(
              'div',
              [
                  _c(
                      'input',
                      {
                          directives:[
                              {
                                  name:"model",
                                  rawName:"v-model",
                                  value:(title),
                                  expression:"title"
                              }
                          ],
                          domProps:{
                              "value":(title)
                          },
                          on:{
                              "input":function($event){
                                  if($event.target.composing)return;
                                  title=$event.target.value
                              }
                          }
                      }
                  ),
                  _v(" "),
                  (!title) ? _c(
                      'button',
                      {
                          on:{
                              "click":add
                          }
                      },
                      [_v("submit")]
                  ): _e()
              ]
          ),
          _v(" "), // 空字符串節(jié)點
          _c('div',
              [
                  _c(
                      'ul',
                      _l((list),function(item){return _c('li',[_v(_s(item))])})
                  )
              ]
          )
      ]
  )
}

這...日子沒法過了
于是我們就發(fā)現了jsx的好用，同樣上述代碼，可讀性更高，更加精簡

在vue中如何使用jsx

主要是依賴babel插件

安裝babel依賴，npm install babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props

配置.babelrc文件

"plugins": [
    [ "transform-vue-jsx" ]
]

子組件是函數式組件

  // content.js
  export default {
    name: 'content',
    functional: true,
    props: {
      render: Function,
      column: {
        type: Object,
        default: null
      },
      params: {
        type: Object,
        default: () => {}
      }
    },
    render: (h, ctx) => {
      const params = ctx.props.params
      return ctx.props.render && ctx.props.render(h, params)
    }
  }

父組件引入

<el-tabs
  v-model="activeName">
    <el-tab-pane
      v-for="item in tabList"
      :key="item.code"
      :label="item.label">
      <span v-if="item.render">
          <content
              :params="item.params"
              :render="item.render"
            ></content>
      </span>
    </el-tab-pane>
</el-tabs>
    <script>
        import Content from './content'
        components: {
           Content
        },
    </script>

template轉jsx的語法轉換

v-model,v-if,v-for，v-html,v-text，vue中的指令

jsx語法是不會有對應的指令的，所以我們就要實現這些指令的功能，對于v-model

// 在vue中
<el-input
  v-model="searchParams.searchVal">
</el-input>

// 對應jsx語法
function _input (value) {
    this.searchParams.searchVal = value
},
item.render = (h, params) => {
    // 這里也可以從params傳入參數
    return (
        <el-input
          value={this.searchParams.searchVal}
          onInput={_input}>
        </el-input>
    )
}

v-if其實就是判斷語句，用&&或三元表達式

// 在vue中
<el-button v-if="show"></el-button>

// 對應jsx語法
item.render = (h, params) => {
    return (
        this.show && <el-button></el-button>
    )
}

v-for其實就是循環(huán)語句，用map

// 在vue中
<ul>
    <li v-for="item in list">{{item.label}}</li>
</ul>

// jsx語法
item.render = (h, params) => {
     return (
         <ul>
             {
                 list.map((item, index) => (
                       <li>{item.label}</li>
                 )
             }
         </ul>
     )
 }

v-html

item.render = (h, params) { 
    return ( 
        <div> <div domPropsInnerHTML={htmlStr}></div> </div> 
    )
}

vue中el-input組件上觸發(fā)原生enter事件，@keyup.enter.native對應nativeOnKeyup

// 在vue中
<el-input
  @keyup.enter.native="onSearch"
></el-input>

// 在jsx中
item.render = (h, params) => {
     function _keyup (e) {
        if (e.keyCode === 13) {
          // 13為enter鍵的鍵盤碼
          this.onSearch()
        }
     }
     return (
         <el-input
          nativeOnKeyup={e => _keyup(e)}>
        </el-input>
     )
 }

vue中的插槽，在jsx中用scopedSlots

// 在vue中
<el-table
    :data="tableData">
    <el-table-column
      v-for="column in columnData"
      :key="column.value"
      :prop="column.value"
      :label="column.value"
      sortable
      :sort-change="change">
      <template slot-scope="scope">
        <span>{{scope.row[column.value]}}</span>
      </template>
    </el-table-column>
 </el-table>
 
// 在jsx中
item.render = (h, params) => {
    return (
        <el-table
            data={tableData}>
            {
              columnData.map((column, index) => (
                <el-table-column
                  prop={column.value}
                  label={column.label}
                  sortable
                  onSort-change={(...args) => sortChange(...args)}
                  scopedSlots={{
                    default: (scope) => <span>{scope.row[column.value]}</span>
                  }}>
                </el-table-column>
              ))
            }
          </el-table>
    )
}

組件用-分隔的事件，在jsx中在第一段on后大寫即可觸發(fā)

比如el-table的sort-change，在jsx中是onSort-change，第一段在on后大寫即可，見上個例子

到此這篇關于如何在vue中使用jsx語法的文章就介紹到這了,更多相關vue使用jsx語法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決Vue響應式數據已獲取而視圖不更新的問題
這篇文章主要介紹了解決Vue響應式數據已獲取而視圖不更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue中ElementUI分頁組件Pagination的使用方法
這篇文章主要為大家詳細介紹了Vue中ElementUI分頁組件Pagination的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
vue項目index.html中使用環(huán)境變量的代碼示例
在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關于vue項目index.html中使用環(huán)境變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-02-02
Vue基礎語法知識梳理上篇
這篇文章主要介紹了Vue基礎語法知識梳理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-12-12
使用Vue 自定義文件選擇器組件的實例代碼
這篇文章主要介紹了使用Vue 自定義文件選擇器組件的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)
這篇文章主要給大家介紹了關于Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)的相關資料,vue是單頁面應用,路由切換后,定時器并不會自動關閉,需要手動清除,當頁面被銷毀時,清除定時器即可,需要的朋友可以參考下
2023-10-10
Vue實現省市區(qū)三級聯動
這篇文章主要為大家詳細介紹了Vue實現省市區(qū)三級聯動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Vue全局自定義指令Modal拖拽的實踐
最近一直在做的項目是Vue2搭建的項目，本文主要介紹了Vue全局自定義指令Modal拖拽的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue組件間通信全面講解
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10