So verwenden Sie jsx/tsx in Vue3

JSX So verwenden Sie

Hier nehmen wir das Vite-Projekt als Beispiel. Um JSX im Projekt zu verwenden, müssen wir ein Plug-in @vitejs/plugin-vue installieren -jsx, dieses Plug-in ermöglicht uns die Verwendung von JSX/TSX im Projekt@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, &#39;changeMsg&#39;]}></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)

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

#🎜🎜#Nachdem die Installation abgeschlossen ist, nehmen Sie einfach eine Konfiguration in vite.config.ts vor. #🎜🎜#rrreee#🎜🎜#Als nächstes werfen wir einen Blick auf die Verwendung von JXS?#🎜🎜 ##🎜🎜#Zunächst einmal ist der erste Weg: Bei Verwendung in der Datei .vue müssen Sie die Sprache im Skript auf tsx setzen und die zurückgeben template #🎜🎜#rrreee#🎜🎜# in der Setup-Funktion oder ändern Sie .vue in .tsx. Hinweis: Wenn das Suffix ist. tsx, das für diese Komponente eingeführte Pfadsuffix muss entfernt werden #🎜🎜#rrreeerrreee# 🎜🎜#Zu diesem Zeitpunkt wird ein Hello World auf der Seite angezeigt#🎜🎜# #🎜🎜#Der zweite Weg sind funktionale Komponenten, da diese Referenz in funktionalen Komponenten nicht vorhanden ist, sodass Vue verwendet props Als erster Parameter übergeben, enthält der zweite Parameter ctx drei Attribute: attrs, emit und slots. Sie entsprechen jeweils den Attributen attrs, attrs, attrs, emit und $slots der Komponenteninstanz. #🎜🎜#rrreee#🎜🎜#An diesem Punkt ist es nicht schwer zu erkennen, dass TSX im Vergleich zu SFC über eine Funktion verfügt, das heißt, es kann mehrere Komponentenvorlagen in einer Datei definieren, wie z. B. #🎜🎜#rrreee#🎜🎜 #This Die beiden von uns definierten Komponenten erscheinen auf der Seite #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Als nächstes werfen wir einen Blick auf die spezifische Verwendung von JSX in Vue#🎜🎜##🎜🎜#Interpolation#🎜🎜##🎜🎜 # Wenn wir Interpolation in SFC verwenden, können wir {{}} zum Umbrechen verwenden, während wir in JSX {} zum Umbrechen verwenden, z. B. #🎜🎜#rrreee# 🎜🎜 #Hier ist zu beachten, dass es nicht erforderlich ist, .value in der SFC-Vorlage hinzuzufügen, Sie müssen jedoch .value in der JSX-Vorlage hinzufügen#🎜🎜## 🎜🎜 #Bedingtes Rendern (v-if)#🎜🎜##🎜🎜#In SFC können wir v-if für bedingtes Rendern verwenden, wie zum Beispiel #🎜🎜#rrreee#🎜🎜#Und in JSX Dann gibt es kein v-if, sondern eine Schreibmethode, die näher am Original ist #🎜🎜#rrreee#🎜🎜#Zusätzlich zu v-if, Sie Denken Sie vielleicht auch an eine andere bedingte Rendering-Methode v-show, JSX unterstützt die Verwendung von v-show#🎜🎜#rrreee#🎜🎜#List-Schleife (v-for )#🎜🎜# #🎜🎜#In SFC verwenden wir häufig v-for für das Rendern von Listenschleifen, z. B. #🎜🎜#rrreee#🎜🎜#In JSX müssen wir ändern, um Map for zu verwenden Listenschleifen-Rendering #🎜🎜#rrreee#🎜🎜#Beachten Sie, dass die Listenschleife in JSX auch verschlüsselt werden muss#🎜🎜##🎜🎜#Ereignisbindung#🎜🎜##🎜🎜#Tatsächlich sind JSX und SFC geschrieben auf die gleiche Weise. Der Unterschied besteht darin, dass Sie als Beispiel click verwenden. Verwenden Sie in SFC @click oder v-on:click für die Ereignisbindung , verwenden Sie in JSX onClick für die Ereignisbindung#🎜🎜#rrreee#🎜🎜#Es ist zu beachten, dass die gebundene Funktion die Pfeilfunktion verwenden muss#🎜🎜##🎜🎜#Ereignismodifikator# 🎜🎜##🎜🎜 #Ereignismodifikatoren können mit den von vue bereitgestellten withModifiers festgelegt werden, z. B. .self#🎜🎜#rrreee#🎜🎜#Aber für .passive, .capture- und .once-Ereignismodifikatoren, die Verwendung von withModifiers wird nicht wirksam. Sie können sie in Form einer verketteten Kamelschreibung festlegen. Dies ist nicht so gut wie .once. 🎜🎜#rrreee#🎜🎜#v-model# 🎜🎜##🎜🎜#v-model ähnelt tatsächlich SFC, wenn modelValue gebunden oder im input verwendet wird tag#🎜🎜#rrreee#🎜🎜#Bei der Verwendung von benutzerdefinierten Ereignissen in Komponenten gibt es einen Unterschied zu SFC. Um beispielsweise eine msg zu binden, genügt v-model:msg in SFC. In JSX müssen Sie ein Array verwenden. Wenn wir uns die folgenden beiden Beispiele direkt ansehen, werden Sie verstehen, dass, wenn unsere Komponente den Namen ea_button trägt, diese Komponente eine update:changeMsg-Methode und den Die Variable msg muss die von der Funktion update:changeMsg übergebenen Parameter akzeptieren#🎜🎜##🎜🎜#SFC:#🎜🎜#rrreee#🎜🎜#JSX:#🎜 🎜#rrreee# 🎜🎜#slot#🎜🎜##🎜🎜# Schauen wir uns zunächst den Standard-Slot an. Wir definieren eine Unterkomponente, um einen Standard-Slot zu erhalten. #🎜🎜#rrreee#🎜🎜#Wenn Sie ihn verwenden möchten Ein benannter Slot muss dem übergeordneten Slot hinzugefügt werden. Ein Objekt wird an die Komponente übergeben, und der Schlüsselwert des Objekts ist der Name des Slots #🎜🎜#rrreee#🎜🎜#Wenn wir das erhalten möchten Wenn Sie Variablen in der untergeordneten Komponente aus dem Slot-Inhalt der übergeordneten Komponente beziehen, betrifft dies den Rollendomänen-Slot. In JSX können wir Parameter übergeben, wenn die Unterkomponente den Standard-Slot oder einen benannten Slot aufruft, wie zum Beispiel den folgenden Slot eins als Beispiel #🎜🎜#rrreee#🎜🎜#Wir können prama1= Slot 1 sehen ist eine Variable in der untergeordneten Komponente. Wir übergeben sie über slots.slotOne(prama1)#🎜🎜# an den Slot-Inhalt der übergeordneten Komponente.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jsx/tsx in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!