Vue3でjsx/tsxを使う方法

JSX の使用方法

ここでは、vite プロジェクトを例として取り上げます。プロジェクトで JSX を使用したい場合は、プラグインをインストールする必要があります @vitejs/plugin-vue -jsx. このプラグインは、プロジェクトで JSX/TSX を使用しましょう

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

After 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 ファイルで使用することです。これには、スクリプトの lang を tsx に設定するか、セットアップ関数でテンプレート

<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

# が表示されます。 ##2 番目の方法は、機能コンポーネントです。機能コンポーネントには this 参照がないため、 Vue は最初のパラメータとして props を渡し、2 番目のパラメータ ctx には attrs、emit、slots の 3 つの属性が含まれます。これらはそれぞれ、コンポーネント インスタンスの 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>
);

のように 1 つのファイルで複数のコンポーネント テンプレートを定義できる機能があることを見つけるのは難しくありません。 、定義した 2 つのコンポーネントが表示されたページ

次に、vue

Interpolation

での JSX の具体的な使用法を見てみましょう。 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 を追加する必要はありませんが、SFC テンプレートに .value

を追加する必要があります。 JSX テンプレート。条件付きレンダリング (v-if)

SFC では、

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

などの条件付きレンダリングに v-if

を使用できますが、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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { defineComponent, ref } from &quot;vue&quot;; export default defineComponent({ name: &quot;app&quot;, setup(props, ctx) { const showyes = ref(true); return () =&gt; ( &lt;div&gt; &lt;div v-show={showyes.value}&gt;yes&lt;/div&gt; &lt;div v-show={!showyes.value}&gt;no&lt;/div&gt; &lt;/div&gt; ); }, });</pre><div class="contentsignin">ログイン後にコピー</div></div>リスト ループ (v-for)

SFC では ## をよく使用します#v-for

はリスト ループのレンダリング (

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

など) です。JSX では、リスト ループのレンダリングにマップを使用するように変更する必要があります。

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 のリスト ループでもマップが必要であることに注意してください。キーを追加するには

#イベント バインディング

イベント バインディングは、実際には JSX と SFC の違いです。例として

click

を使用するには、

@click またはSFC の v-on:click JSX のイベ​​ント バインディングの場合、イベント バインディングに onClick を使用します。

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

ここで、バインドされた関数はアロー関数

イベント変更シンボル

イベント修飾子は、

.self

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

# など、vue によって提供される withModifiers を使用して設定できます。 ##ただし、.passive、.capture、および Once イベント修飾子の場合、withModifiers を使用しても効果はありません。チェーンされたキャメル ケースの形式で設定できます。

ほど優れたものではありません。 Once

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { defineComponent } from &quot;vue&quot;; export default defineComponent({ name: &quot;app&quot;, setup(props, ctx) { return () =&gt; ( &lt;div onClickOnce={() =&gt; { console.log(&quot;我被点击&quot;); }} &gt; 点击 &lt;/div&gt; ); }, });</pre><div class="contentsignin">ログイン後にコピー</div></div>v-model v-model は、

modelValue

をバインドする場合、または

input

タグで使用する場合、実際には SFC に似ています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { defineComponent, ref } from &quot;vue&quot;; export default defineComponent({ name: &quot;app&quot;, setup(props, ctx) { const num = ref(0); return () =&gt; &lt;input type=&quot;text&quot; v-model={num.value} /&gt;; }, });</pre><div class="contentsignin">ログイン後にコピー</div></div> コンポーネントでバインディングのカスタマイズを使用する場合 イベントと SFC には違いがあります。たとえば、msg をバインドする場合、SFC では

v-model:msg を直接使用できます。

ただし、JSX では配列を使用する必要があります。次の 2 つの例を直接見ると、コンポーネントの名前が ea_button である場合、このコンポーネントは親コンポーネントの msg# である update:changeMsg メソッドを送信することがわかります。 ##変数は、update:changeMsg 関数によって渡されたパラメータを受け入れる必要がありますSFC:

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

JSX:

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

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

名前付きスロットを使用したい場合は、親コンポーネントでオブジェクトを渡す必要があります。名前

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 では、サブコンポーネントがデフォルトのスロットまたは名前付きスロット (例として次のスロット 1 など) を呼び出すときにパラメーターを渡すことができます。

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=slot 1## がわかります。 # は子コンポーネントの変数です。

slots.slotOne(prama1)

を通じて親コンポーネントのスロット コンテンツに渡します。

以上がVue3でjsx/tsxを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。