189 8069 5689

怎么在Vue3中使用JSX

今天小编给大家分享一下怎么在Vue3中使用JSX的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联服务紧随时代发展步伐，进行技术革新和技术进步，经过十多年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行成都网站制作、网站建设、外贸网站建设、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

    1. Vue3 中 JSX 的基本应用

    • 使用 .jsx 格式文件和 defineComponent

    • defineComponent 可传入 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 使用单括号 { }

    // 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
})

    3. JSX 和 slot （体会 JSX 的优越性）

    • slot 是 Vue 发明的概念，为了完善 template 的能力

    • slot 一直是 Vue 初学者的“噩梦”，特别是：作用域 slot

    • 但使用 JSX 将很容易理解，因为 JSX 本质就是 js

    以上就是“怎么在Vue3中使用JSX”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。


    新闻标题：怎么在Vue3中使用JSX
    转载来于：http://cdxtjz.cn/article/pcgdih.html

    其他资讯