Vue3使用JSX的方法实例(笔记自用)

目录 1. Vue3 中 JSX 的基本应用 1.1 在 .vue 文件中使用 jsx 1.2 .jsx文件格式 2. JSX 和 template 的区别 2.1 插值 2.2 自定义组件 2.3 属性和事件 2.4 条件和循环  3. JSX 和 slot （体会 JSX 的优越性） 总结 

1. Vue3 中 JSX 的基本应用

使用 .jsx 格式文件和&nbs p; define component defineComponent 可传入 SETUP 函数 或 组件的配置 插值使用单括号  {}

1.1 在 .vue 文件中使用 jsx

// 父
 
<template>
  <div class="home">
    <JSXDemo1 />
  </div>
</template>
 
<script>
import JSXDemo1  From  '@/components/JSXDemo1.vue'
 export  default {
  n am e: 'HomeView',
  components: {
    JSXDemo1
  }
}
</script>
 
// JSXDemo1.vue
 
<script>
import { ref } f rom  'vue'
e xp ort default {
  setup () {
    const countRef = ref(200)
 
    const render = () => {
      return <p>DEMO1--{countRef.value}</p> // jsx就是js语法，所以要加 .value
    }
    return render
  }
}
</script>

1.2 .jsx文件格式

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

2. JSX 和 template 的区别

语法上有很大区别 ： JSX 本质就是 js 代码，可以使用 js 的任何能力 template 只能嵌入 简单 的 js 表达式，其他需要指令，如 v-if JSX 已经成为 ES 规范，template 还是 Vue 自家规范 本质是相同的： 都会被编译为 js 代码（render 函数）

2.1 插值

template 使用双括号 {{ }} jsx 使用单括号 { }

// template
 
<template>
  <p>{{ name }} -- {{ age }}</p>
</template>
 
// jsx
 
const render = () => {
    return <>
        <p>child {props.a}</p>
    </>
}

2.2 自定义组件

template 组件名使用时可 改变 大小写或是驼峰，jsx 不可更改 引入动态参数，template使用冒号+参数名（:msg=& # 39 ;m sg'）,jsx 不需要冒号

// template
 
<template>
  <div class="home">
    <watch-effect :msg="msgRef"/>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import WatchEffect from '@/components/WatchEffect.vue'
export default {
  name: 'HomeView',
  components: {
    WatchEffect,
  },
  setup () {
    const msgRef = ref('123')
    return {
        msgRef
    }
  }
}
</script>
 
// jsx 组件名称不可变，要和引入名字保持一致
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100}></JSXChild>
    </>
  }
  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 <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100} change={onChange}></JSXChild>
    </>
  }
  return render
})

2.4 条件和循环 

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

// template v-if
 
<template>
  <p v-if="flagRef">template demo</p>
  <button @click="changeFlagRef">click</button>
</template>
<script>
import { ref } from 'vue'
export default {
  setup () {
    const flagRef = ref(true)
 
    function changeFlagRef () {
      flagRef.value = !flagRef.value
    }
 
    return {
      flagRef,
      changeFlagRef
    }
  }
}
</script>
 
// 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 <>
      <p onClick={changeFlagRef}>DEMO2--{flagRef.value.toString()}</p>
      {flagRef.value && <JSXChild a={flagRef.value}></JSXChild>}
    </>
  }
  return render
})

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

// template v-for
 
<template>
  <ul>
    <li v-for=" IT em in  stat e.list" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup () {
    const state = reactive({
      list: ['a', 'b', 'c']
    })
 
    return {
      state
    }
  }
}
</script>
 
// jsx 数组 .map 函数
 
import { defineComponent, reactive } from 'vue'
 
export default defineComponent(() => {
  const state = reactive({
    list: ['a1', 'b1', 'c1']
  })
 
  const render = () => {
    return <>
      <ul>
        {state.list.map(item => <li>{item}</li>)}
      </ul>
    </>
  }
  return render
})

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

slot 是 Vue 发明的概念，为了完善 template 的能力 slot 一直是 Vue 初学者的[噩梦]，特别是：作用域 slot 但使用 JSX 将很容易理解，因为 JSX 本质就是 js

总结 

到此这篇关于Vue3使用JSX的 文章 就介绍到这了,更多相关Vue3使用JSX内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: 详解在vue3中使用jsx的配置以及一些小问题 vue3无法使用jsx的问题及解决 vue3+vite使用jsx和tsx详情 为什么推荐使用JSX开发Vue3 如何在vue3中优雅的使用jsx/tsx详解 Vite创建Vue3项目及Vue3使用jsx详解 vue3 中使用 jsx 开发的详细过程 一文详解如何在Vue3+Vite中使用JSX

总结

以上是 为你收集整理的 Vue3使用JSX的方法实例(笔记自用) 全部内容，希望文章能够帮你解决 Vue3使用JSX的方法实例(笔记自用) 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3使用JSX的方法实例(笔记自用)的详细内容...