Vue 3 Babel JSX 插件

以 JSX 的方式来编写 Vue 代码

安装

安装插件

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

npm install @ant-design-vue/babel-helper-vue-transform-on

配置 Babel

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

使用

参数

transformOn

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

compatibleProps

兼容大多数 Vue 2 的写法，Vue 3 中，把所有属性都改成了顶级属性，意味这不需要再传递 props，attrs 这些属性。

开启这个参数意味着对 { attrs, props, on } 做了兼容处理，但是所有的属性外层都会有 compatibleProps 方法

表达式

内容

函数式组件

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

在 render 中使用

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

Fragment

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

Attributes/Props

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

with a dynamic binding:

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

指令

建议在 JSX 中使用驼峰 (vModel)，但是 v-model 也能用

v-show

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

v-model

修饰符：使用 (_) 代替 (.) (vModel_trim={this.test})

export default {
  data: () => ({
    test: 'Hello World',
  }),
  render() {
    return (
      <>
        <input type="text" vModel_trim={this.test} />
        {this.test}
      </>
    )
  },
}

或者使用这种实现

<input vModel={[val, ['trim']]} />

<A vModel={[val, 'foo', ['bar']]} />

会变编译成：

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

自定义指令

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

注意：如果想要使用 arg, 第二个参数需要为字符串

插槽

const App = {
  setup() {
    const slots = {
      a: () => <div>A</div>,
      b: () => <span>B</span>
    }
    return () => <A vSlots={slots} />
  }
}