一文詳解如何在Vue3中使用jsx/tsx

更新時(shí)間：2023年03月23日 15:03:19 作者：東方小月

本篇文章旨在帶領(lǐng)大家快速了解和使用?Vue?中的?JSX?語法,好讓大家在?Vue?中遇到或使用?JSX?的時(shí)候能很快入手，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單文件組件模式,即一個(gè)組件就是一個(gè)文件,但其實(shí) Vue 也是支持使用 JSX 來編寫組件的。這里不討論 SFC 和 JSX 的好壞,這個(gè)仁者見仁智者見智。本篇文章旨在帶領(lǐng)大家快速了解和使用 Vue 中的 JSX 語法,好讓大家在 Vue 中遇到或使用 JSX 的時(shí)候能很快入手

JSX 如何用

這里以vite項(xiàng)目為例,要想在項(xiàng)目中使用 JSX,我們需要安裝一個(gè)插件@vitejs/plugin-vue-jsx,這個(gè)插件可以讓我們?cè)陧?xiàng)目中使用 JSX/TSX

npm i @vitejs/plugin-vue-jsx -D

安裝完成之后在vite.config.ts進(jìn)行一個(gè)配置即可

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 設(shè)置為tsx,在 setup 函數(shù)中返回模板

<script lang="tsx">
import { defineComponent } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    return () => <div>Hello World</div>;
  },
});
</script>

或者將.vue改成.tsx,注意:如果后綴為.tsx,需要將引入到這個(gè)組件的路徑后綴去掉

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");

此時(shí)頁面上就會(huì)展示一個(gè)Hello World

第二種方式是函數(shù)式組件,因?yàn)楹瘮?shù)式組件里沒有 this 引用，所以 Vue 把 props 當(dāng)作第一個(gè)參數(shù)傳入,第二個(gè)參數(shù) ctx 包含三個(gè)屬性：attrs、emit 和 slots。它們分別相當(dāng)于組件實(shí)例的 attrs、attrs、attrs、emit 和 $slots 這幾個(gè)屬性。

//App.tsx
export default (props, ctx) => <div>Hello World</div>;

到這里我們不難發(fā)現(xiàn),TSX 相比于 SFC 有一個(gè)特點(diǎn),那就是它可以在一個(gè)文件中定義多個(gè)組件模板,比如

const Component1 = () => <div>Component1</div>;
const Component2 = () => <div>Component2</div>;

export default () => (
  <div>
    <Component1 />
    <Component2 />
  </div>
);

此時(shí)頁面中便出現(xiàn)了我們定義的兩個(gè)組件

接下來我們來看一下 JSX 在 vue 中的具體用法

插值

在 SFC 中使用插值的時(shí)候我們可以使用{{}}進(jìn)行包裹,而在 JSX 中是使用{}進(jìn)行包裹,例如

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進(jìn)行條件渲染,如

<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,大家可能還會(huì)想到另一個(gè)條件渲染方式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>
    );
  },
});

列表循環(huán)(v-for)

在 SFC 中我們經(jīng)常使用v-for進(jìn)行列表循環(huán)渲染,如

<ul>
  <li v-for="{ index, item } in list" :key="index">{{ item }}</li>
</ul>

而在 JSX 中我們則需要改成使用 map 進(jìn)行列表循環(huán)渲染

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 中列表循環(huán)也是要加 key 的

事件綁定

事件綁定其實(shí) JSX 與 SFC 就是寫法上的區(qū)別,以click為例,在 SFC 中使用@click或者v-on:click進(jìn)行事件綁定,在 JSX 中則使用onClick進(jìn)行事件綁定

import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    return () => (
      <div
        onClick={() => {
          console.log("我被點(diǎn)擊");
        }}
      >
        點(diǎn)擊
      </div>
    );
  },
});

這里需要注意綁定的函數(shù)要使用箭頭函數(shù)

事件修飾符

事件修飾符可以使用 vue 提供的withModifiers進(jìn)行設(shè)置,如.self

import { defineComponent, ref, withModifiers } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    return () => (
      <div
        onClick={withModifiers(() => {
          console.log("我被點(diǎn)擊");
        }, ["self"])}
      >
        點(diǎn)擊
      </div>
    );
  },
});

但是對(duì)于 .passive、.capture 和 .once 事件修飾符，使用withModifiers并不生效,這里可以采用鏈?zhǔn)今劮宓男问竭M(jìn)行設(shè)置,不如.once

import { defineComponent } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    return () => (
      <div
        onClickOnce={() => {
          console.log("我被點(diǎn)擊");
        }}
      >
        點(diǎn)擊
      </div>
    );
  },
});

v-model

v-model 在綁定modelValue或者在input標(biāo)簽中使用的時(shí)候其實(shí)和 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} />;
  },
});

當(dāng)在組件中使用綁定自定義事件的時(shí)候和 SFC 就有了區(qū)別,比如綁定一個(gè)msg,在 SFC 中直接v-model:msg即可,而在 JSX 中則需要使用一個(gè)數(shù)組。我們直接看下面兩個(gè)例子你就會(huì)明白,假如我們組件名叫ea_button,這個(gè)組件發(fā)送了一個(gè)update:changeMsg的方法,父組件的msg變量需要接受update:changeMsg函數(shù)傳來的參數(shù)

SFC:

<ea-button v-model:changeMsg="msg"></ea-button>

JSX:

<ea-button v-model={[msg.value, 'changeMsg']}></ea-button>

插槽

先看下默認(rèn)插槽,我們定義一個(gè)子組件 Child 接收一個(gè)默認(rèn)插槽

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>默認(rèn)插槽</Child>;
  },
});

如果想使用具名插槽則需要在父組件中傳入一個(gè)對(duì)象,對(duì)象的 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>
    );
  },
});

如果我們想在父組件的插槽內(nèi)容中獲取到子組件中的變量,此時(shí)便涉及到了作用域插槽。在 JSX 中我們可以在子組件調(diào)用默認(rèn)插槽或者某個(gè)具名插槽的時(shí)候傳入?yún)?shù),如下面的插槽一為例

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)將其傳到了父組件的插槽內(nèi)容中

最后

關(guān)于 Vue3 中 JSX 的語法就介紹這么多,其實(shí)如果你熟悉 Vue 的 SFC 語法還是能很快上手 JSX 語法的,因?yàn)樗鼈円簿褪菍懛ㄉ嫌幸恍﹨^(qū)別,用法上還是基本一樣的。至于選擇哪一種寫法還是取決于我們自己,我的建議是二者兼得,你可以根據(jù)實(shí)現(xiàn)不同的功能采用不同的寫法。當(dāng)然,如果你是一個(gè)團(tuán)隊(duì)項(xiàng)目,你還是乖乖聽你領(lǐng)導(dǎo)的吧。

到此這篇關(guān)于一文詳解如何在Vue3中使用jsx/tsx的文章就介紹到這了,更多相關(guān)Vue3使用jsx/tsx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: