Cara menggunakan jsx/tsx dalam Vue3

Cara menggunakan JSX

Di sini kami mengambil projek vite sebagai contoh Untuk menggunakan JSX dalam projek, kami perlu memasang pemalam@vitejs/plugin-vue-jsx ini membolehkan kami menggunakan JSX/TSX dalam projek

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

Selepas pemasangan selesai, cuma lakukan konfigurasi dalam 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()],
});

Seterusnya kita Mari kita lihat cara menggunakan JXS

Pertama sekali, cara pertama ialah menggunakannya dalam fail .vue Anda perlu menetapkan lang skrip ke tsx dan kembalikan templat

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

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

rrree.vuePada masa ini, .tsx.tsx

//main.ts中引入
import { createApp } from "vue";
import "./style.css";
import App from "./App";

createApp(App).mount("#app");

Pada ketika ini tidak sukar untuk mencari bahawa TSX mempunyai ciri berbanding SFC, iaitu, ia boleh mentakrifkan beberapa templat komponen dalam satu fail, seperti

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

Hello WorldPada masa ini , halaman Dua komponen yang kami takrifkan muncul

Seterusnya mari kita lihat penggunaan khusus JSX dalam vue

Interpolasi

dalam Apabila menggunakan interpolasi dalam SFC, kita boleh menggunakan

untuk membungkus, manakala dalam JSX, kita menggunakan

untuk membungkus, seperti

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

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

Perlu diingatkan di sini bahawa tidak perlu menambah , tetapi anda perlu menambah

{{}} pemaparan bersyarat (v-jika) {}

dalam templat JSX kami boleh menggunakan

untuk pemaparan bersyarat, seperti .value

import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    const text = ref("Hello World");
    return () => <div>{text.value}</div>;
  },
});

.valueDalam JSX, tidak ada

, tetapi kaedah penulisan yang lebih dekat dengan asli

<div>
  <div v-if="showyes">yes</div>
  <span v-else>no</span>
</div>

Selain

, anda mungkin juga berfikir kaedah pemaparan bersyarat lain v-if, dalam JSX Ia menyokong

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>;
  },
});

gelung senarai (v-untuk) menggunakan v-if

Dalam SFC kami sering menggunakan v-if untuk pemaparan gelung senarai, seperti 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-show dan Dalam JSX, kita perlu menukar kepada menggunakan peta untuk pemaparan gelung senarai

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

Perhatikan bahawa gelung senarai dalam JSX juga perlu menambah kunci

Pengikatan acara v-for

Event binding Sebenarnya, perbezaan antara JSX dan SFC ialah kaedah penulisan

, dalam SFC, gunakan

atau

untuk event binding, manakala dalam JSX, gunakan.

untuk mengikat acara

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>
    );
  },
});

Perlu diperhatikan bahawa fungsi terikat mesti menggunakan fungsi anak panah

click pengubah acara @clickv-on:clickPengubah suai acara boleh ditetapkan menggunakan onClick disediakan oleh vue, seperti

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

Tetapi untuk pengubah .pasif, .capture dan .sekali, menggunakan

anda boleh menetapkannya dalam bentuk kotak unta berantai , yang tidak sebaik

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

withModifiersv-model .self

v-model sebenarnya serupa dengan SFC apabila digunakan dalam mengikat

atau dalam withModifiers tag .once

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

Apabila mengikat acara tersuai digunakan dalam komponen, ia adalah serupa dengan SFC Terdapat perbezaan Sebagai contoh, untuk mengikat

, hanya gunakan

terus dalam SFC, tetapi dalam JSX, anda perlu menggunakan. tatasusunan. Jika kita melihat terus pada dua contoh berikut, anda akan faham bahawa jika komponen kami dinamakan

, komponen ini menghantar kaedah modelValue dan input pembolehubah komponen induk perlu menerima parameter yang diluluskan oleh

fungsi

msgSFC:v-model:msg

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} />;
  },
});

ea_buttonJSX:update:changeMsg

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

msgSlotupdate:changeMsg

Mari kita lihat pada slot lalai dahulu. komponen Anak untuk menerima slot lalai

<ea-button v-model={[msg.value, &#39;changeMsg&#39;]}></ea-button>

Jika kita ingin menggunakan slot bernama, kita perlu memasukkan objek dalam komponen induk Nilai utama objek ialah nama slot

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>;
  },
});

Jika kita ingin menggunakannya dalam kandungan slot komponen induk Mendapatkan pembolehubah dalam subkomponen melibatkan slot skop. Dalam JSX, kita boleh memasukkan parameter apabila sub-komponen memanggil slot lalai atau slot bernama Contohnya, dalam slot 1 di bawah,

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>
    );
  },
});

, kita dapat melihat bahawa

berada dalam sub-. pembolehubah, kami menghantarnya ke kandungan slot komponen induk melalui

Atas ialah kandungan terperinci Cara menggunakan jsx/tsx dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!