转载自：https://github.com/vuejs/jsx-next
Vue 3 Babel JSX 插件
安装
安装插件
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
enableObjectSlots
使用 enableObjectSlots (文档下面会提到)。虽然在 JSX 中比较好使，但是会增加一些 _isSlot 的运行时条件判断，这会增加你的项目体积。即使你关闭了 enableObjectSlots，v-slots 还是可以使用
pragma
Type: string
Default: createVNode
替换编译JSX表达式的时候使用的函数
表达式
内容
函数式组件
const App = () => ;
在 render 中使用
const App = {
render() {
return Vue 3.0;
},
};
import { withModifiers, defineComponent } from "vue";
const App = defineComponent({
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
{count.value}
);
},
});
Fragment
const App = () => (
<>
I'm
Fragment
);
Attributes / Props
const App = () => ;
动态绑定:
const placeholderText = "email";
const App = () => ;
指令
v-show
const App = {
data() {
return { visible: true };
},
render() {
return ;
},
};
v-model
注意：如果想要使用
arg, 第二个参数需要为字符串
会变编译成：
h(A, {
argument: val,
argumentModifiers: {
modifier: true,
},
"onUpdate:argument": ($event) => (val = $event),
});
v-models
注意: 你应该传递一个二维数组给 v-models。
会变编译成：
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 () => ;
},
};
插槽
注意: 在
jsx中，应该使用v-slots代替v-slot
const A = (props, { slots }) => (
<>
{ slots.default ? slots.default() : 'foo' }
{ slots.bar?.() }
);
const App = {
setup() {
const slots = {
bar: () => B,
};
return () => (
A
);
},
};
// or
const App = {
setup() {
const slots = {
default: () => A,
bar: () => B,
};
return () => ;
},
};
// or
const App = {
setup() {
return () => (
<>
{{
default: () => A,
bar: () => B,
}}
{() => "foo"}
);
},
};
在 TypeSript 中使用
tsconfig.json:
{
"compilerOptions": {
"jsx": "preserve"
}
}
兼容性
要求：
- Babel 7+
- Vue 3+