Vue中Jsx的使用

时间：2024-01-28 16:06:37

什么是JSX?

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

应用场景是什么？

当需要用render函数写一个复杂的组件时，可以考虑使用jsx的方式。让代码结构简单，降低开发难度，提升易读性。

举个栗子

vue.js官网demo：https://cn.vuejs.org/v2/guide/render-function.html#JSX

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

我开发过程中的栗子：

1.调用

 {
          title: "组织机构",
          resizable: true,
          minWidth: 200,
          align: "left",
          key: "organizeName",
          render: (h, params) => {
            return (
              <TemplateMainOrgs {...{ props: { organizeName: params.row.organizeName } }} ></TemplateMainOrgs>
            )
          }
        },

2.定义

<template>
  <Tooltip placement="top" :class="{detailClassFix:isDetailPage}">
    <div class="ellipsis-2line" style="-webkit-box-orient: vertical;" v-if="orgs.length>0">
      <div v-for="(org,index) in orgs" :key="index">
        <p>{{org}}</p>
      </div>
    </div>
    <div class v-else>--</div>
    <div slot="content">
      <div class v-if="orgs.length>0">
        <div v-for="(org,index) in orgs" :key="index">
          <p>{{org}}</p>
        </div>
      </div>
      <div class v-else>--</div>
    </div>
  </Tooltip>
</template>
<script>
export default {
  props: {
    organizeName: {
      type: String,
      required: true,
      default: '',
    },
    parentName: {
      type: String,
      required: false,
    },
  },
  data () {
    return {
    }
  },
  computed: {
    isDetailPage: function () {
      return this.parentName == 'detail'
    },
    orgs: function () {
      return this.handleName() || []
    },
  },
  created () {
  },
  methods: {
    handleName () {
      if (this.organizeName) {
        let arr = this.organizeName.split(',')
        return arr.map(item => {
          return item.replaceAll('*', ' > ')
        })
      }
    }
  },
}
</script>
<style lang="less" scoped>
.detailClassFix {
  vertical-align: top;
  .ellipsis-2line {
    -webkit-line-clamp: 8;
  }
}
</style>
View Code

可以看出，由于需要渲染的内容及其复杂，不易于使用render函数直接书写，因此将内容单独为一个组件，在此引入。而且抽取出来的组件也可以用在其他地方。

如何给jsx组件传值

vueJsx readerme

 

相关文章