https://github.com/vuejs/babel-plugin-jsx#installation

Vue 3 Babel JSX プラグイン

JSX 方式で Vue コードを作成する

インストール

npm install @vue/babel-plugin-jsx -D

バベルの構成

{ "プラグイン": ["@vue/babel-plugin-jsx"] }

パラメータ

変身

タイプ： boolean

デフォルト： false

on: { click: xx } に変わる onClick: xxx

最適化

タイプ： boolean

デフォルト： false

最適化を有効にするかどうか。Vue 3 に慣れていない場合は、最適化を有効にすることはお勧めしません。

isCustomElement

タイプ： (tag: string) => boolean

デフォルト： undefined

カスタム要素

マージプロップ

タイプ： boolean

デフォルト： true

クラス / スタイル / onXXX ハンドラーをマージします

オブジェクトスロットを有効にする

使用します enableObjectSlots (ドキュメントで後述します)。JSX での使用は簡単ですが、実行時の条件判断が一部増加し _isSlot 、プロジェクトのサイズが大きくなります。閉じても enableObjectSlotsそのままv-slots 使えます

プラグマ

タイプ： string

デフォルト： createVNode

JSX式のコンパイル時に使用される関数を置き換えます。

表現内容

機能部品

const App = () => <div></div>;

レンダリングで使用される

const App = {
  render() {
    return <div>Vue 3.0</div>;
  },
};
import { withModifiers, defineComponent } from "vue";

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
    );
  },
});

フラグメント (ルートタグなし、<></> を使用)

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
);

プロパティバインディング:

const App = () => <input type="email" />;

動的バインディング:

const placeholderText = "email";
const App = () => <input type="email" placeholder={placeholderText} />;

命令

Vショー

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input v-show={this.visible} />;
  },
};

v モデル

注: を使用する場合 arg、2 番目のパラメータは文字列である必要があります。

<input v-model={val} />
<input v-model:argument={val} />
<input v-model={[val, ["modifier"]]} />
<A v-model={[val, "argument", ["modifier"]]} />

次のようにコンパイルされます。

h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  "onUpdate:argument": ($event) => (val = $event),
});

v-models (1.1.0 以降非推奨)

注: 2D 配列を v-model に渡す必要があります。

<A v-models={[[foo], [bar, "bar"]]} />
<A
  v-models={[
    [foo, "foo"],
    [bar, "bar"],
  ]}
/>
<A
  v-models={[
    [foo, ["modifier"]],
    [bar, "bar", ["modifier"]],
  ]}
/>

次のようにコンパイルされます。

h(A, {
  modelValue: foo,
  modelModifiers: {
    modifier: true,
  },
  "onUpdate:modelValue": ($event) => (foo = $event),
  bar: bar,
  barModifiers: {
    modifier: true,
  },
  "onUpdate:bar": ($event) => (bar = $event),
});

カスタムディレクティブ

引数のみを使用することをお勧めします

const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom:arg={val} />;
  },
};

const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
  },
};

スロット

注: では、代わりにを jsx 使用する必要があります。 v-slotsv-slot

const A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// 或者，当 `enableObjectSlots` 不是 `false` 时，您可以使用对象插槽
const App = {
  setup() {
    return () => (
      <>
        <A>
          {
   
   {
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => "foo"}</B>
      </>
    );
  },
};

TypeScript での使用

tsconfig.json:

{ 
  "compilerOptions": { 
    "jsx": "preserve" 
  } 
}

まだvueに慣れていないので、前回はバインド・エミットの仕方が分かりませんでした

実際、エミットバインディングは関数の前に追加するだけで済みます。たとえば、次のようになります。

// parent
const App = (
    <Component onHandleClick={ /** ...func */ }></Component>
)

// component
const emit = define('handleClick')
emit('handleClick')

jsx構文でvueを書くにはどうすればよいですか?