JSX简明语法

简明语法

Vue DevUI组件库的所有组件使用JSX方式编写，因此特意准备了一份JSX简明语法指南，方便大家学习和参考。

嵌入表达式

使用大括号包裹，支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，formatName(user)。

const name = 'Vue DevUI'
const element = <h1>Hello, { name }</h1>

条件渲染

jsx本身也是一个条件表达式。

使用 if/else

const element = (name) => {
  if (name) {
    return <h1>Hello, { name }</h1>
  } else {
    return <h1>Hello, Stranger</h1>
  }
}

使用三目运算符

const element = icon ? <span class="icon"></span> : null;

列表渲染

const data = [{
  id: 1,
  title: '通用'
}, {
  id: 2,
  title: '导航'
}]

const element = data.map(item => {
  return <div>{ item.title }</div>
})

标签属性

const href = 'https://devui.design'

const element = <a href={href}></a>

类名 class

const element = <div className={`devui-accordion-item-title ${ disabled ? 'disabled' : '' }`}></div>

还可以使用数组：

const element = <div className={['devui-accordion-item-title', disabled && 'disabled' }`]}></div>

样式 style

const width = '100px'

const element = <button style={{ width: width, fontSize: '16px' }}></button>

注意：

• class -> className
• tabindex -> tabIndex

插槽

如果是具名插槽，则将default改成具名插槽的名称，比如myslot，则使用ctx.slots.myslot?.()。

button.tsx：

import { defineComponent } from 'vue'
import './button.scss';

type IButtonType = 'button' | 'submit' | 'reset';

export default defineComponent({
  name: 'd-button', // 组件名
  props: { // 输入/输出
    type: {
      type: String as () => IButtonType,
      default: 'button'
    },
    btnClick: {
      type: Function as unknown as () => ((event: MouseEvent) => void)
    }
  },
  setup(props, ctx) { // 逻辑
    const { type, btnClick } = props;

    return {
      type, btnClick
    }
  },
  render() { // 模板
    const { type, btnClick } = this

    return <button
      type={type}
      onClick={btnClick}
    >{ this.$slots.default?.() }</button>
  }
})

如果只写setup，则插槽从ctx获取，并且不需要再加$前缀。

import { defineComponent } from 'vue'
import './button.scss';

type IButtonType = 'button' | 'submit' | 'reset';

export default defineComponent({
  name: 'd-button', // 组件名
  props: { // 输入/输出
    type: {
      type: String as () => IButtonType,
      default: 'button'
    },
    btnClick: {
      type: Function as unknown as () => ((event: MouseEvent) => void)
    }
  },
  setup(props, ctx) { // 逻辑
    const { type, btnClick } = props;

    return () => {
      return <button
        type={type}
        onClick={btnClick}
      >{ ctx.slots.default?.() }</button>
    }
  },
})

插槽传参

插槽是可以传参的，以下是具体的示例。

JSX和SFC中插槽使用的写法对比。

JSX写法：

{{ mySlot: (item: TreeItem) => (item.open ? : ), }}

SFC写法：

<d-tree :data="data">
  <template #mySlot="item">
    <IconOpen v-if="item.open" />
    <IconClose v-else />
  </template>
</d-tree>

其中的item是插槽的参数，通过

ctx.slots.mySlot(item)

的方式给插槽传入参数。

参考

Vue 3 Babel JSX 插件

Vue3 JSX 使用指南

JSX 简介