babel-plugin-jsx/packages/babel-plugin-jsx/README-zh_CN.md

Vue 3 Babel JSX 插件

以 JSX 的方式来编写 Vue 代码

English | 简体中文

安装

安装插件

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

配置 Babel

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

使用

参数

transformOn

Type: boolean

Default: false

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

optimize

Type: boolean

Default: false

是否开启优化. 如果你对 Vue 3 不太熟悉，不建议打开

isCustomElement

Type: (tag: string) => boolean

Default: undefined

自定义元素

mergeProps

Type: boolean

Default: true

合并 class / style / onXXX handlers

表达式

内容

函数式组件

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

Fragment

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={[val, ['modifier']]} />

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

会变编译成：

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

v-models

注意: 你应该传递一个二维数组给 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,
})

自定义指令

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

插槽

注意: 在 jsx 中，应该使用 v-slots 代替 v-slot

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

// or

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

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

在 TypeSript 中使用

tsconfig.json:

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

谁在用

Ant Design Vue

Vant

Element Plus

兼容性

要求：

• Babel 7+
• Vue 3+