如何在Vue3中使用JSX？

WBOY

发布时间：2023-05-09 21:09:19

2850人浏览过

来源于亿速云

转载

1. Vue3 中 JSX 的基本应用

使用 .jsx 格式文件和 defineComponentdefineComponent 可传入 setup 函数或组件的配置插值使用单括号 {}

1.1 在 .vue 文件中使用 jsx

// 父
 

 

 
// JSXDemo1.vue

1.2 .jsx文件格式

// 父组件
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => { // 传入 setup 函数
  const countRef = ref(300)
 
  const render = () => {
    return <>
      DEMO2--{countRef.value}
      
    
  }
  return render 
})
 
// 子组件 JSXChild.jsx
 
import { defineComponent } from 'vue'
 
export default defineComponent({ // 传入组件配置
  props: ['a'],
  setup (props) {
    const render = () => {
      return <>
        child {props.a}
      
    }
    return render
  }
})

2. JSX 和 template 的区别

语法上有很大区别：

JSX 本质就是 js 代码，可以使用 js 的任何能力

立即学习“前端免费学习笔记（深入）”；

template 只能嵌入简单的 js 表达式，其他需要指令，如 v-if

JSX 已经成为 ES 规范，template 还是 Vue 自家规范

本质是相同的：

都会被编译为 js 代码（render 函数）

2.1 插值

template 使用双括号 {{ }}

jsx 使用单括号 { }

Shopxp网上购物系统
Shopxp购物系统历经多年的考验，并在推出shopxp免费购物系统下载之后，收到用户反馈的各种安全、漏洞、BUG、使用问题进行多次修补，已经从成熟迈向经典，再好的系统也会有问题，在完善的系统也从在安全漏洞，该系统完全开源可编辑，当您下载这套商城系统之后，可以结合自身的技术情况，进行开发完善，当然您如果有更好的建议可从官方网站提交给我们。Shopxp网上购物系统完整可用，无任何收费项目。该系统经过

下载

// template
 

 
// jsx
 
const render = () => {
    return <>
        child {props.a}
    
}

2.2 自定义组件

template 组件名使用时可改变大小写或是驼峰，jsx 不可更改

引入动态参数，template使用冒号+参数名（:msg='msg'）,jsx 不需要冒号

// template
 

 

 
// jsx 组件名称不可变，要和引入名字保持一致
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  const render = () => {
    return <>
      DEMO2--{countRef.value}
      
    
  }
  return render
})

2.3 属性和事件

template 区分属性和事件的写法，jsx 不区分

// jsx 属性和事件的写法一样
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  function onChange () {
    console.log('onChange')
  }
  const render = () => {
    return <>
      DEMO2--{countRef.value}
      
    
  }
  return render
})

2.4 条件和循环

条件 template 使用 v-if 指令，jsx 在表达式中使用 && （类似 if( a && b)）

// template v-if
 


 
// jsx &&符号判断
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => {
  const flagRef = ref(true)
 
  function changeFlagRef () {
    flagRef.value = !flagRef.value
  }
 
  const render = () => {
    return <>
      DEMO2--{flagRef.value.toString()}
      {flagRef.value && }
    
  }
  return render
})

循环 template 使用 v-for 指令，jsx 使用数组的 .map 函数

// template v-for
 


 
// jsx 数组 .map 函数
 
import { defineComponent, reactive } from 'vue'
 
export default defineComponent(() => {
  const state = reactive({
    list: ['a1', 'b1', 'c1']
  })
 
  const render = () => {
    return <>
      
        {state.list.map(item => {item})}
      
    
  }
  return render
})