我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的，這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智，本篇文章旨在帶領大家快速了解和使用 Vue 中的 JSX 語法,好讓大家在 Vue 中遇到或使用 JSX 的時候能很快入手
JSX 如何用
這里以vite專案為例,要想在專案中使用 JSX,我們需要安裝一個插件@vitejs/plugin-vue-jsx,這個插件可以讓我們在專案中使用 JSX/TSX
npm i @vitejs/plugin-vue-jsx -D
安裝完成之后在vite.config.ts進行一個配置即可
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
});
接下來我們看一下如何使用 JXS?
首先第一種方式就是在.vue檔案中使用,需要將 script 中的 lang 設定為tsx,在 setup 函式中回傳模板
<script lang="tsx">
import { defineComponent } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
return () => <div>Hello World</div>;
},
});
</script>
或者將.vue改成.tsx,注意:如果后綴為.tsx,需要將引入到這個組件的路徑后綴去掉
import { defineComponent } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
return () => <div>Hello World</div>;
},
});
//main.ts中引入
import { createApp } from "vue";
import "./style.css";
import App from "./App";
createApp(App).mount("#app");
此時頁面上就會展示一個Hello World
第二種方式是函式式組件,因為函式式組件里沒有 this 參考，所以 Vue 把 props 當作第一個引數傳入,第二個引數 ctx 包含三個屬性：attrs、emit 和 slots，它們分別相當于組件實體的 attrs、attrs、attrs、emit 和 $slots 這幾個屬性，
//App.tsx
export default (props, ctx) => <div>Hello World</div>;
到這里我們不難發現,TSX 相比于 SFC 有一個特點,那就是它可以在一個檔案中定義多個組件模板,比如
const Component1 = () => <div>Component1</div>;
const Component2 = () => <div>Component2</div>;
export default () => (
<div>
<Component1 />
<Component2 />
</div>
);
此時頁面中便出現了我們定義的兩個組件
接下來我們來看一下 JSX 在 vue 中的具體用法
插值
在 SFC 中使用插值的時候我們可以使用{{}}進行包裹,而在 JSX 中是使用{}進行包裹,例如
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
const text = ref("Hello World");
return () => <div>{text.value}</div>;
},
});
這里需要注意的是在 SFC 模板中是不需要加.value的,但是 JSX 模板中則需要加.value
條件渲染(v-if)
在 SFC 中我們可以使用v-if進行條件渲染,如
<div>
<div v-if="showyes">yes</div>
<span v-else>no</span>
</div>
而在 JSX 中則沒有了v-if,而是采用更接近原生的寫法
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
const showyes = ref(true);
return () => <div>{showyes.value ? <div>yes</div> : <div>no</div>}</div>;
},
});
除了v-if,大家可能還會想到另一個條件渲染方式v-show,JSX 中是支持使用v-show的
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
const showyes = ref(true);
return () => (
<div>
<div v-show={showyes.value}>yes</div>
<div v-show={!showyes.value}>no</div>
</div>
);
},
});
串列回圈(v-for)
在 SFC 中我們經常使用v-for進行串列回圈渲染,如
<ul>
<li v-for="{ index, item } in list" :key="index">{{ item }}</li>
</ul>
而在 JSX 中我們則需要改成使用 map 進行串列回圈渲染
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
const list = ref(["one", "two", "three"]);
return () => (
<div>
{list.value.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
);
},
});
注意,JSX 中串列回圈也是要加 key 的
事件系結
事件系結其實 JSX 與 SFC 就是寫法上的區別,以click為例,在 SFC 中使用@click或者v-on:click進行事件系結,在 JSX 中則使用onClick進行事件系結
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
return () => (
<div
onClick={() => {
console.log("我被點擊");
}}
>
點擊
</div>
);
},
});
這里需要注意系結的函式要使用箭頭函式
事件修飾符
事件修飾符可以使用 vue 提供的withModifiers進行設定,如.self
import { defineComponent, ref, withModifiers } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
return () => (
<div
onClick={withModifiers(() => {
console.log("我被點擊");
}, ["self"])}
>
點擊
</div>
);
},
});
但是對于 .passive、.capture 和 .once 事件修飾符，使用withModifiers并不生效,這里可以采用鏈式駝峰的形式進行設定,不如.once
import { defineComponent } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
return () => (
<div
onClickOnce={() => {
console.log("我被點擊");
}}
>
點擊
</div>
);
},
});
v-model
v-model 在系結modelValue或者在input標簽中使用的時候其實和 SFC 差不多
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "app",
setup(props, ctx) {
const num = ref(0);
return () => <input type="text" v-model={num.value} />;
},
});
當在組件中使用系結自定義事件的時候和 SFC 就有了區別,比如系結一個msg,在 SFC 中直接v-model:msg即可,而在 JSX 中則需要使用一個陣列，我們直接看下面兩個例子你就會明白,假如我們組件名叫ea_button,這個組件發送了一個update:changeMsg的方法,父組件的msg變數需要接受update:changeMsg函式傳來的引數
SFC:
<ea-button v-model:changeMsg="msg"></ea-button>
JSX:
<ea-button v-model={[msg.value, 'changeMsg']}></ea-button>
插槽
先看下默認插槽,我們定義一個子組件 Child 接收一個默認插槽
import { defineComponent, ref } from "vue";
const Child = (props, { slots }) => {
return <div>{slots.default()}</div>;
};
export default defineComponent({
name: "app",
setup(props, ctx) {
const num = ref(0);
return () => <Child>默認插槽</Child>;
},
});
如果想使用具名插槽則需要在父組件中傳入一個物件,物件的 key 值就是插槽的名字
import { defineComponent, ref } from "vue";
//@ts-ignore
const Child = (props, { slots }) => {
return (
<div>
<div>{slots.slotOne()}</div>
<div>{slots.slotTwo()}</div>
<div>{slots.slotThree()}</div>
</div>
);
};
export default defineComponent({
name: "app",
setup(props, ctx) {
const num = ref(0);
return () => (
<Child>
{{
slotOne: () => <div>插槽1</div>,
slotTwo: () => <div>插槽2</div>,
slotThree: () => <div>插槽3</div>,
}}
</Child>
);
},
});
如果我們想在父組件的插槽內容中獲取到子組件中的變數,此時便涉及到了作用域插槽，在 JSX 中我們可以在子組件呼叫默認插槽或者某個具名插槽的時候傳入引數,如下面的插槽一為例
import { defineComponent, ref } from "vue";
//@ts-ignore
const Child = (props, { slots }) => {
const prama1 = "插槽1";
return (
<div>
<div>{slots.slotOne(prama1)}</div>
<div>{slots.slotTwo()}</div>
<div>{slots.slotThree()}</div>
</div>
);
};
export default defineComponent({
name: "app",
setup(props, ctx) {
return () => (
<Child>
{{
slotOne: (pramas: string) => <div>{pramas}</div>,
slotTwo: <div>插槽2</div>,
slotThree: <div>插槽3</div>,
}}
</Child>
);
},
});
我們可以看到prama1=插槽1是子組件中的變數,我們通過slots.slotOne(prama1)將其傳到了父組件的插槽內容中
最后
關于 Vue3 中 JSX 的語法就介紹這么多,其實如果你熟悉 Vue 的 SFC 語法還是能很快上手 JSX 語法的,因為它們也就是寫法上有一些區別,用法上還是基本一樣的，至于選擇哪一種寫法還是取決于我們自己,我的建議是二者兼得,你可以根據實作不同的功能采用不同的寫法，當然,如果你是一個團隊專案,你還是乖乖聽你領導的吧，
關注公眾號web前端進階每日更新最新前端技術文章,你想要的都有!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550580.html
標籤：其他