Vue Superman

介绍

一个可以让你在 template 里渲染 jsx 或 tsx 组件的库，让你的 ui 渲染更灵活。

支持 vue2 和 vue3。

安装

npm i vue-xrender

yarn add vue-xrender

pnpm add vue-xrender

浏览器(CDN)

<!-- Unpkg -->
<script src="https://unpkg.com/vue-xrender@0.1.10" />

<!-- JsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/vue-xrender@0.1.10" />

为什么

思考一下，假如你要做一个这样的组件：

<template>
  <Modal v-if="isWrapModal">
    <article>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </article>
  </Modal>
  <article v-else>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </article>
</template>
<script>
import {defineComponent} from 'vue'
import Modal from 'xxx-ui'

export default defineComponent({
  components: {
    Modal
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    isWrapModal: {
      type: Boolean,
      default: false
    }
  }
})
</script>

现在，你有了 vue-xrender，你可以：

<template>
  <Modal v-if="isWrapModal">
    <Article />
  </Modal>
  <Article v-else />
</template>
<script lang="jsx">
import {defineComponent} from 'vue'
import Modal from 'xxx-ui'
import {useJsx} from 'vue-xrender'

export default defineComponent({
  components: {
    Modal
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    isWrapModal: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    useJsx('Article', () => (
      <article>
        <h1>{props.title}</h1>
        <p>{props.content}</p>
      </article>
    ))

    return {}
  }
})
</script>

示例