Ⅰ. vue3 的 JSX 寫法

• 對于熟悉react 的小伙伴, 可以通過 jsx 來 做 vue3

• 讓我們一起來踩坑 👇

文章目錄

• • Ⅰ. vue3 的 JSX 寫法
  • Ⅱ. JSX 安裝和配置
  • • • 1. 通過 webpack 構建的
      • 2. 通過 vite 構建的
  • Ⅳ. JSX 的 在vue 的應用
  • • • 1. JSX => 兩種寫法
      • 2.JSX => 父子組件通信
      • 3. JSX => 用v-if 、v-show
      • 4. JSX => 用 v-for
      • 5. JSX => 插槽的使用
  • Ⅳ. JSX 從頭搭建 vue3
  • • • 1. 主文件和入口
      • 2. 配置路由

Ⅱ. JSX 安裝和配置

1. 通過 webpack 構建的

如果是通過官方 vue-cli 腳手架去創建的則需要如下操作 👇

① 安裝 [ 第 一 步 ]

npm install @vue/babel-plugin-jsx -D

② 配置 [ 第 二 步 ]

配置根目錄 babel.config.js 👇

module.exports = {plugins: ["@vue/babel-plugin-jsx"] // 省略其他配置 }

---

2. 通過 vite 構建的

如果是通過去 vite 去創建的則需要如下操作 👇

① 安裝 [ 第 一 步 ]

npm i @vitejs/plugin-vue-jsx

② 配置 [ 第 二 步 ]

配置根目錄 vite.config.js 👇

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'import vueJsx from "@vitejs/plugin-vue-jsx"; export default defineConfig({plugins: [vue(),vueJsx() //添加 jsx]//...省略其他配置 })

---

Ⅳ. JSX 的 在vue 的應用

1. JSX => 兩種寫法

① 寫法一 : ???

不需要 props 來傳參 , 簡寫

import { defineComponent } from 'vue'; export default defineComponent((props, {emits}) => {return () => <div> 寫法1 </div> })

• defineComponent 去傳入一個 函數 ( 會默認為 setup )

• 寫法方便， 因為 無法去定義 props , 所以 props 一直為空對象

• 但是可以正常使用 emits 和 slots 等

② 寫法二 : ?????

需要 props 傳參

import { defineComponent } from 'vue'; export default defineComponent({props:{params:{ type: String, defualt: ()=> ''} },setup(props) {return () => <div> 寫法2 , 父組件傳過來的值 { props.params } </div>} })

• defineComponent 去傳入一個 整個對象
• 可以定義props ,可以使用 (父組件 => 子組件) 值
• 復雜的場景，更加推薦，使用起來更加靈活

2.JSX => 父子組件通信

父組件: (Father.jsx) 👇

import { defineComponent, ref } from 'vue'; import Child from './Child.jsx' export default defineComponent(() => {const params = ref('123')function getChild(val){ console.log(val)}return () => <div><h3>子組件↓ </h3><Child params={ params.value } onFather={ getChild } /></div>; })

子組件 : (Child.jsx) 👇

import { defineComponent, ref } from 'vue'; export default defineComponent({props: ['params'],setup(props , { emit }) {const text = ref('傳給父組件的值')return () => <div>父組件傳來的值: { props.params }<button onClick = {()=>{ emit('father', text.value) } }> 傳給 father </button></div>} })

• 第二種可以定義 props 的寫法，才可以接收 父組件傳遞的參數
• emit 給父組件通信，父組件自定義 方法 要 加 on + 大寫開頭方法

---

3. JSX => 用v-if 、v-show

const visble = ref(true) const onOff =() => { visble.value = !visble.value } return () => <div><button onClick= { onOff }> 開關 </button>{ visble.value && <span>'內容...'</span> } </div>

• v-if 沒辦法正常使用 ， 可以通過表達式代替
• v-show 可以正常使用

---

4. JSX => 用 v-for

v-for 可以通過 map 代替

const list = [ {name:'張三'}, {name: '李四'}] const onOff =() => { visble.value = !visble.value } return () => <ul>{list.map(res => <li>{res.name}</li>)} </ul>

---

5. JSX => 插槽的使用

父組件: 👇

<Page2 v-slots={{ aaa: () => <span>123</span> ,bbb: () => <span>456</span> }} />

子組件: 👇

setup(props, { slots }) {return () => <div>我是插槽aaa: {slots.aaa && slots.aaa()} <br>我是插槽bbb: {slots.bbb && slots.bbb()}</div>

• 通過 v-slots 返回對象，對象的每個屬性為一個函數 ，返回對應的文本標簽
• 根據函數的名稱，調用對應的方法，來放置具名插槽的位置
• 先做個插槽的判空操作，會更加嚴謹

---

Ⅳ. JSX 從頭搭建 vue3

我們用jsx 去替代所有的 vue 文件， 從頭搭建開始如下 👇

1. 主文件和入口

我們將App.vue 改成 App.jsx

參考如下 ： 主文件（main.js） 👇

import { createApp } from "vue"; import App from "./App.jsx"; import router from './router';const app = createApp(App); app .use(router) .mount("#app");

參考如下 ： App.jsx 👇 , 來實現人口文件

import { defineComponent } from 'vue'; import { useRouter } from "vue-router"; export default defineComponent(() => {const router = useRouter();return () => <div><button onClick = { ()=> router.push('/page1') } > 頁面1 </button><button onClick = { ()=> router.push('/page2') } > 頁面2 </button><router-view></router-view></div> })

2. 配置路由

參考如下 👇

import { createRouter, createWebHistory } from 'vue-router' const routerHistory = createWebHistory()const router = createRouter({history: routerHistory,routes: [{path: '/',component: () => import('../App.jsx'),redirect:'/page1',children: [{ path: '/page1', component: () => import('../views/page1.jsx') }{ path: '/page2', component: () => import('../views/page2.jsx') }]}] }) export default router;

🍭作者水平很有限，如果發現錯誤，一定要及時告知作者哦！感謝感謝！

總結

以上是生活随笔為你收集整理的vue 配置 JSX语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。