Vue で jsx 構文を正しく使用する方法

const {createApp} = Vue

const アプリ = createApp({})

app.component('アンカー付き見出し', {
  テンプレート: `
    <h1 v-if="レベル === 1">
      <スロット></スロット>
    </h1>
    <h2 v-else-if="レベル === 2">
      <スロット></スロット>
    </h2>
    <h3 v-else-if="レベル === 3">
      <スロット></スロット>
    </h3>
    <h4 v-else-if="レベル === 4">
      <スロット></スロット>
    </h4>
    <h5 v-else-if="レベル === 5">
      <スロット></スロット>
    </h5>
    <h6 v-else-if="レベル === 6">
      <スロット></スロット>
    </h6>
  `、
  小道具: {
    レベル：
      タイプ: 数値、
      必須: true
    }
  }
})

const { createApp, h } = Vue

const アプリ = createApp({})

app.component('アンカー付き見出し', {
  与える（） {
    h(を返す
      'h' + this.level, // タグ名
      {}, // プロパティ/属性
      this.$slots.default() // 子の配列
    ）
  },
  小道具: {
    レベル：
      タイプ: 数値、
      必須: true
    }
  }
})

「vue」からdefineComponentをインポートします。
エクスポートデフォルトdefineComponent({
  名前: "Jsx",
  与える（） {
    <div>私はdivです</div>を返します。
  },
});

「vue」からdefineComponentをインポートします。
エクスポートデフォルトdefineComponent({
  名前: "Jsx",
  設定（） {
    return () => <div>私はdivです</div>;
  },
});

 設定（） {
   return () => <div class="test">私はdivです</div>;
 },

  設定（） {
    return () => <div style={{ color: "red" }}>私はdivです</div>;
  },

// 親コンポーネントのセットアップ() {
    戻り値 () => (
      <div style={{ color: "赤" }}>
        <span>私は親コンポーネントです</span>
        <Mycom msg={"私は親コンポーネントから渡された値です"} />
      </div>
 );

// サブコンポーネント、setupの最初のパラメータはpropsで値を取得できます setup(props) {
    return () => <div>私は子コンポーネントです {props.msg}</div>;
  },

設定（） {
    関数eventClick() {
      console.log("クリック");
    }
    return () => <button onClick={eventClick}>ボタン</button>;
},

// サブコンポーネント import { defineComponent } from "vue";
エクスポートデフォルトdefineComponent({
  名前:「マイコム」
  発行: ["イベント"],
  セットアップ(props, { 出力 }) {
    関数sendData() {
      emitting("event", "サブコンポーネントによって渡されたデータ");
    }
    戻り値 () => (
      <div>
        <span>カスタム イベント</span>
        <button onClick={sendData}>データを送信</button>
      </div>
    );
  },
});

// 親コンポーネント // @ts-nocheck
// これは jsx では問題ありませんが、tsx では ts 型エラーが報告されるため、上記の現在のファイル ts 監視 @ts-nocheck を無視しました。
「vue」からdefineComponentをインポートします。
Mycomを「./mycom」からインポートします。
エクスポートデフォルトdefineComponent({
  名前: "Jsx",
  設定（） {
    関数 getSon(msg: 文字列) {
      コンソールログ(メッセージ);
    }
    戻り値 () => (
      <div>
        <Mycom onEvent={getSon} />
      </div>
    );
  },
});

  設定（） {
    関数 getSon(msg: 文字列) {
      コンソールログ(メッセージ);
    }
    戻り値 () => (
      <div>
        <Mycom {...{ onEvent: getSon }} />
      </div>
    );
  },

// 親コンポーネントのセットアップ() {
    定数スロット = {
      テスト: () => <div>名前付きスロット</div>,
      デフォルト: () => <div>デフォルトスロット</div>,
    };
    戻り値 () => (
      <div>
        <Mycom v-slots={スロット}></Mycom>
      </div>
    );
},

セットアップ(props, { スロット }) {
// サブコンポーネント return () => (
      <div>
        <span>スロット</span>
        {スロット.default?.()}
        {スロット.テスト?.()}
      </div>
    );
  },

  設定（） {
    const inputData = ref("");
    戻り値 () => (
      <div>
        <span v-show={true}>表示</span>
        <span v-show={false}>非表示</span>
        <input type="text" v-model={inputData.value} />
        <span>{入力データ値}</span>
      </div>
    );
},