vite中配置vue3使用jsx语法

安装 yarn add @vitejs/plugin-vue-jsxvite.config.js

import { defineConfig } from "vite";
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vueJsx(),
    ...
  ],
})

语法

把 on: { click: xx } 转成 onClick: xxx

函数式组件
const App = () => <div></div>;
在 render 中使用

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>
  </>
);
Attributes / Props
const App = () => <input type="email" />;
动态绑定:

const placeholderText = "email";
const App = () => <input type="email" placeholder={placeholderText} />;
指令
v-show
const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input v-show={this.visible} />;
  },
};
v-model
注意：如果想要使用 arg, 第二个参数需要为字符串

<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 开始不推荐使用)
注意: 你应该传递一个二维数组给 v-models。

<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),
});
自定义指令
只有 argument 的时候推荐使用

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-slots 代替 v-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} />;
  },
};

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

参考文章查看

vite中配置vue3使用jsx语法 ​

语法 ​

vite中配置vue3使用jsx语法

语法