💡💡💡Vue3 用了这么久还没体验过 JSX/TSX？来封装个业务弹窗玩玩

前端嘟老板
1,300 阅读7分钟

前言

哈喽大家好！我是嘟老板。平时开发 Vue 项目时，用的最多的就是模板组件，一些模板组件实现起来稍微麻烦的需求，也会用到渲染函数，对于 JSX/TSX 的应用相比之下就少了很多，不知大家是否也是如此呢？不过没关系，今天我们来详细的梳理下如何在 Vue 项目中使用 JSX。建议跟着文章敲起来，为自己的技术道路添砖加瓦😄。

阅读本文您将收获：

  1. 了解 Vue3 如何使用 JSX/TSX。
  2. 封装个业务弹窗，体验下 JSX/TSX 在实际开发中的应用。
  3. 等等...

JSX 简介

JSX 是一种类似 XML 的 JavaScript 扩展，本身没有特定的语义。 JavaScript 引擎和浏览器没有直接实现它，也没有纳入 ECMAScript 规范，核心作用就是被各种编译器（如 Babel）解析，转换成标准的 JavaScript 代码。

简单来说，JSX 被设计为一个中间格式，用于在 JavaScript 中方便地编写类似 HTML 的结构，最终通过工具（如 Babel）转换成标准的 JavaScript 代码，以在浏览器或 JavaScript 引擎中运行。

JSX 代码示例：

const vnode = <div>hello</div>

Vue3 中使用 JSX/TSX

启用 JSX

脚手架

目前 create-vue 和 Vue CLI 脚手架工具创建的模板工程，都提供了预置的 JSX 支持选项。

手动配置

若要手动配置，可使用 @vue/babel-plugin-jsx 插件。

安装依赖

终端输入以下命令，回车执行：

npm install @vue/babel-plugin-jsx -D
配置 babel

babel 配置文件，如 babel.config.js 中添加如下配置：

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

Vite 配置

若项目使用 Vite 构建，需配置 ViteJSX 插件 - @vitejs/plugin-vue-jsx，否则无法识别 JSX 语法，会报解析错误。

image.png

安装插件

终端输入以下命令，回车执行：

npm install @vitejs/plugin-vue-jsx -D
配置插件

Vite 配置文件，vite.config.ts 添加如下配置：

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ]
})

TSX

TS 配置

若项目使用 TypeScript，Vue 也为 TSX 提供了类型推断。

tsconfig.json compilerOptions 选项中添加如下配置：

{
    "jsx": "preserve"
}

这样 TypeScript 会保留 JSX 语法，以便 Vue 的 JSX 转换器 将其转换为 Vue 渲染函数。

类型

  • Vue3.4 之前的版本，Vue 会自动注册全局 JSX 命名空间，处理 JSX 相关的类型定义，无需手动处理。

  • Vue3.4 版本之后，为减少全局污染，不再自动注册全局 JSX 命名空间，需要手动配置 TypeScript 来支持 JSX。

    tsconfig.json compilerOptions 选项中添加如下配置：

    {
    "jsx": "preserve",
    "jsxImportSource": "vue",
}

OK、JSX 的环境准备工作到此结束。

常见用法

列举 Vue 相关语法的 JSX 版本。

指令

v-if

JSX 中使用三元表达式实现 v-if 执行效果：

<div>{ok.value ? <div>yes</div> : <span>no</span>}</div>
v-show

可以在 JSX 结构中直接使用：

<input v-show={this.visible} />;
v-for

JSX 中使用 Array.map 实现 v-for 指令遍历效果：

<ul>
  {items.value.map(({ id, text }) => {
    return <li key={id}>{text}</li>
  })}
</ul>
v-model

Vue 模板组件中的 v-model 指令有以下几种用法：

  • 直接使用：v-model="value"
  • 带参：v-model:title="title"
  • 带修饰符：v-model.trim="input"
  • 带参 + 修饰符：v-model:title.trim="title"

针对以上情况，我们分别来看下 JSX 如何实现：

  1. 直接使用
<input v-model={val} />
  1. 带参
<input v-model:title={title} />
  1. 带修饰符
<input v-model_trim={input} />

或

<input v-model={[input, ['trim']]} />
  1. 带参 + 修饰符
<input v-model:title_trim={title} />

或

<input v-model={[title, 'title', ['trim']]} />

事件 v-on

JSX 中以 on + 大写字母开头的属性名作为事件监听器。如 onClick 相当于模板中的 @click。

<button
  onClick={(event) => {
    /* ... */
  }}
>
  Click Me
</button>
修饰符

按 JSX 处理方式划分，可把事件修饰符分为两类：

  • .passive, .capture, .once

    这三个修饰符可以用驼峰命名法连接到事件名称后，作为事件监听器。

    <input
  onClickCapture={() => {}}
  onKeyupOnce={() => {}}
  onMouseoverOnceCapture={() => {}}
/>

  • 除以上三个修饰符之外的，如 .self

    使用 withmodifiers 帮助函数处理。

    <div onClick={withModifiers(() => {}, ['self'])} />

插槽

渲染插槽

我们可以通过 setup 函数上下文获取 slots 对象，其包含要渲染的所有插槽。假设现有组件 A，需要渲染 footer 插槽，可以如下方式渲染：

export default {
  props: ['message'],
  setup(props, { slots }) {
    return <div>{slots.footer({ text: props.message })}</div>
  }
}
传递插槽

向组件传递插槽时，有以下几种方式：

  1. v-slots

注意：是 v-slots，不是 v-slot

将插槽对象传递给 v-slots 指令。

export default {
  setup(props, { slots }) {
    const slots = {
      footer: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}></A>
    );
  }
}
  1. 对象插槽

将插槽对象作为组件的子内容传递。

export default {
  setup(props, { slots }) {
    const slots = {
      footer: () => <span>B</span>,
    };
    return () => (
      <A>{slots}</A>
    );
  }
}

封装业务弹窗

接下来我们用 JSX 封装一个基于 ElementPlus Dialog 的业务弹窗组件 - zm-dialog，整合弹窗标题，主体内容和底部操作按钮等主要内容。

1. 创建组件

创建 zm-dialog.tsx 文件，新增以下初始内容：

import { ElDialog } from 'element-plus'

export const ZmDialog = defineComponent({
  name: 'ZmDialog',
  setup(props) {
    return {}
  },
  render() {
    return <ElDialog></ElDialog>
  }
})

最基础的组件框架，没有任何内容。

2. 属性&事件

思考下组件的属性设计，考虑到大家对应 ElementPlus 组件已经十分熟悉，从降低上手难度的角度来说，我们应尽量沿用 ElDialog 组件的属性设计，并在此基础上，添加支撑业务组件的扩展属性。

属性包括但不限于以下：

  • model-value/v-model：控制弹窗显隐。
  • title：弹窗标题。
  • width：弹窗宽度。
  • fullscreen：弹窗是否全屏。
  • top：弹窗距离顶部的 css 距离（margin-top）。
  • modal：是否需要遮罩。
  • append-to-body：是否插入至 body 元素。
  • ...
  • cancelButtonText: 取消按钮展示文本，默认“取消”。
  • confirmButtonText：确认按钮展示文本，默认“确定”。
  • ...

事件除了沿用 ElDialog 的事件外，额外新增 cancel、confirm 事件，点击对应按钮时触发。

import { dialogProps, ElDialog } from 'element-plus'

const zmDialogProps = {
  ...dialogProps,
  // 取消按钮文本
  cancelButtonText: {
    type: String,
    default: '取消'
  },
  // 确定按钮文本
  confirmButtonText: {
    type: String,
    default: '确定'
  }
}

const zmDialogEmits = ['confirm', 'cancel']

3. 结构设计

弹窗结构包括以下三部分：

  • 顶部标题栏：

    包括标题及关闭按钮。

  • 主体内容：

    包括弹窗需要展示的主体内容，根据业务需求定义。

  • 底部操作栏：

    包括取消、确认操作按钮。

本部分涉及到插槽的定义：

  • 标题插槽 header：对应 ElDialog 的 header 插槽。
  • 主体内容插槽 default：对应 ElDialog 的 default 插槽。
  • 底部栏插槽 footer：对应 ElDialog 的 footer 插槽，默认展示”取消“、”确认“按钮。
/**
 * 弹窗组件
 * 支持 Dialog 和 Drawer
 */
import { dialogProps, ElButton, ElDialog } from 'element-plus'
import type { ExtractPropTypes } from 'vue'

const zmDialogProps = {
  ...dialogProps,
  // 取消按钮文本
  cancelButtonText: {
    type: String,
    default: '取消'
  },
  // 确定按钮文本
  confirmButtonText: {
    type: String,
    default: '确定'
  }
}

const zmDialogEmits = ['confirm', 'cancel']

export const ZmDialog = defineComponent({
  name: 'ZmDialog',
  props: zmDialogProps,
  emits: zmDialogEmits,
  setup(props, { emit }) {
    const visible = computed({
      get() {
        return props.modelValue
      },
      set(val) {
        emit('update:modelValue', val)
      }
    })

    const elDialogProps = computed(() =>
      Object.keys(dialogProps).reduce((pre: any, cur: any) => {
        pre[cur] = props[cur]
        return pre
      }, {})
    )

    const onCancel = () => {
      visible.value = false
      emit('cancel')
    }

    const onConfirm = () => {
      emit('confirm')
    }

    return {
      visible,
      elDialogProps,
      onCancel,
      onConfirm
    }
  },
  render() {
    const { onCancel, onConfirm, cancelButtonText, confirmButtonText } = this
    const footer = this.$slots.footer
      ? this.$slots.footer
      : () => (
          <div>
            <ElButton onClick={onCancel}>{cancelButtonText}</ElButton>
            <ElButton type="primary" onClick={onConfirm}>
              {confirmButtonText}
            </ElButton>
          </div>
        )

    const slots = {
      header: this.$slots.title,
      default: this.$slots.default,
      footer
    }
    return (
      <ElDialog
        {...this.elDialogProps}
        v-model={this.visible}
        v-slots={slots}
      ></ElDialog>
    )
  }
})

4. 组件应用

zm-dialog 暂且封装到这，还有很多可以完善的地方，不过作为示例够用了，现在来测试一下。

新增测试页面，编写如下代码：

<template>
  <zm-dialog
    v-model="visible"
    title="测试弹窗"
    @opened="handleOpened"
    @cancel="handleCancel"
    @confirm="handleConfirm"
  >
    hello dialog
  </zm-dialog>
</template>

<script setup lang="ts">
const visible = defineModel({ type: Boolean, default: false })

const handleOpened = () => {
  console.log('Opened')
}

const handleCancel = () => {
  console.log('canceled')
}

const handleConfirm = () => {
  console.log('confirmed')
}
</script>

Sep-06-2024 16-52-05.gif

结语

本文重点介绍了 Vue3 使用 JSX/TSX 的开发方式，比较详细的讲述了 Vue 常用语法对应的 JSX 写法，并动手实践，一起封装业务弹窗组件，旨在帮助同学们加深对于 JSX 在 Vue 项目中的应用理解。希望对您有所帮助！相关代码已上传至 GitHub，欢迎 star。

如您对文章内容有任何疑问或想深入讨论，欢迎评论区留下您的问题和见解。

技术简而不凡，创新生生不息。我是嘟老板，咱们下期再会。

往期干货

avatar
文章
阅读
粉丝