vue 中 jsx 的使用

1. 介绍

使用 vue-cli 构建的 vue3 + ts 的项目，默认启用了 jsx

2. 启用

说明：

1. 在 tsconfig.json 中关闭 noImplicitAny

   {
     "compilerOptions": {
       // ...
       "noImplicitAny": false,
     },
   }
   

2. 使用 <script lang="tsx">

   <template>
     <!-- "ant-design-vue": "^4.1.2", -->
     <a-table
       :columns="columns"
     />
   </template>
   <script lang="tsx">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     data() {
       return {
         columns: [
           // ...
           {
             title: 'Sheet Name',
             dataIndex: 'sheetName',
             key: 'sheetName',
             customRender({ text, record, index, column }) {
               return (
                 <div>{ text }</div>
               );
             },
           },
         ]
       };
     },
   });
   </script>
   

3. 语法

3.1. 表达式

说明：

• { 表达式 }

示例：

const id = 1

const list = <div id={id}>{name}</div>

3.2. Fragment

说明：

• vue3 中的模板可以有多个 根元素，其实是用 Fragment 包裹起来了
• <></> 能达到同样的效果

示例：

const render = () => (
  <>
    <div>1</div>
    <span>2</span>
  </>
)

3.3. 属性绑定

示例：

const placeholderText = 'email';

// 基本属性
const render = () => {
  return (
    <input
      type="email"
      placeholder={placeholderText} 
     />
  )
};

// class 与 style
const render = () => {
  return (
    <div
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px' }}
    >
    </div>
  )
}

3.4. 绑定事件

说明：

• 事件以 on 打头，小驼峰命名法
• 事件修饰符需要拼接到

示例：

const render = (
 <div onClick={handleClick}>事件绑定</div>
)

// 事件修饰符
const render = () => (
  <input
    onKeyupOnce={() => {}}
    onClickCapture={() => {}}
    onMouseoverOnceCapture={() => {}}
  />
)

3.5. v-for

说明：

• 使用 Array.prototype.map 替代

示例：

const render = () => (
 <ul> 
   {
     items.value.map(({ id, text }) => { 
       return (
         <li key={id}>{text}</li> 
       )
     })
   } 
 </ul>
)

3.6. v-if

说明：

• 使用 三元表达式 或者 && 替代

示例：

// 使用三元表达式
const render = () => (
  <div>
    { ok.value ? <div>yes</div> : <span>no</span> }
  </div>
)

// 使用 && 连接符
const render = () => (
  <div>
    { ok.value && <div>yes</div> }
    { !ok.value && <span>no</span> }
  </div>
)

3.7. v-show

示例：

// v-show
const render = () => (
  <div v-show={show}></div>
)

// 或者 vShow
const render = () => (
  <div vShow={show}></div>
)

3.8. v-model

示例：

const value = ref('')

const render = () => (
  <input v-model={value} />
)

// 自定义 model 属性
const render = () => (
  <input v-model:visible={value} />
)

// 修饰符
const render = () => (
  <input v-model={[value, ['trim']]} />
)

// 自定义 model 属性 + 修饰符
const render = () => (
  <input v-model={[value, 'visible', ['trim']]} />
)

3.9. slot

略

4. 参考

• 万字长文详解 Vue JSX，带你全面拥抱 JSX 特性！ (opens new window)