Vue 3.0 的 Babel 插件 JSX

加入Vue JSX支持.

页:1 简体中文

安装

安装插件 :

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

然后将插件添加到.babelrc:

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

使用量

选项

打开

类型 : boolean

默认 : false

转换 on: { click: xx } 改为 onClick: xxx

优化

类型 : boolean

默认 : false

允许优化与否。 如果你对Vue 3不熟悉,不推荐启用.

海关元素

类型 : (tag: string) => boolean

默认 : undefined

配置自定义元素

语法

内容

职能构成部分

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

已生效

const App = {
  render() {
    return <div>Vue 3.0</div>;
  }
};

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

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

  return () => (
    <div onClick={inc}>
      {count.value}
    </div>
  );
});

import { withModifiers } from 'vue';

const App = () => {
  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。 。 。 .

<input v-model={val} />

<input v-model={[val, ['trim']]} />

<A v-model={[val, 'foo', ['bar']]} />

将汇编到:

h(A, {
  'foo': val,
  "fooModifiers": {
    "bar": true
  },
  "onUpdate:foo": $event => val = $event
})

自定义指令

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

槽

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

谁在用

蚂蚁设计Vue

范特语

兼容性

此 repo 仅兼容 :

• 贝贝 7+
• 第3号+