Vue 3 的 Babel 插件 JSX
加入Vue JSX支持.
页:1 简体中文
安装
安装插件 :
npm install @vue/babel-plugin-jsx -D
然后将插件添加到您的 bail 配置 :
{
"plugins": ["@vue/babel-plugin-jsx"]
}
使用量
选项
打开
类型 : boolean
默认 : false
转换 on: { click: xx } 改为 onClick: xxx
优化
类型 : boolean
默认 : false
启用时, 此插件将使用优化运行时代码 PatchFlags 财务报告和审定财务报表 SlotFlags 提高渲染性能。 然而,由于JSX的动态性质,优化不如Vue官方模板编译器中那样全面.
由于优化后的代码可能跳过某些重置以提高性能,因此我们强烈建议在允许此选项确保一切如所期望的那样工作后,彻底测试您的应用.
海关元素
类型 : (tag: string) => boolean
默认 : undefined
配置自定义元素
合并选项
类型 : boolean
默认 : true
合并静态和动态类/ 样式属性 / 在 XXX 处理器上
启用对象槽
类型 : boolean
默认 : true
是否启用 object slots (以下文中提及)语法". 在JSX中也许有用,但会增加很多 _isSlot 增加捆绑大小的条件表达式。 还有 v-slots 即使 enableObjectSlots 关闭.
贴纸
类型 : string
默认 : createVNode
替换汇编 JSX 表达式时使用的函数 .
分辨率类型
类型 : boolean
默认 : false
(单位:千美元)实验从类型推断组件元数据(例如:. props, (中文(简体) ), emits, (中文(简体) ), name) (中文(简体) ). 这是一个实验性特征,可能并非在所有情况下都可行.
语法
内容
职能构成部分
const App = () => <div>Vue 3.0</div>
已生效
const App = {
render() {
return <div>Vue 3.0</div>
},
}
import { defineComponent, withModifiers } 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>
</>
)
属性/ 道具
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:argument={val} />
;<input v-model={[val, ['modifier']]} />
// Or
;<input v-model_modifier={val} />
;<A v-model={[val, 'argument', ['modifier']]} />
// Or
;<input v-model:argument_modifier={val} />
将汇编到:
h(A, {
argument: val,
argumentModifiers: {
modifier: true,
},
'onUpdate:argument': ($event) => (val = $event),
})
v-型(自v1.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,
barModifiers: {
modifier: true,
},
'onUpdate:bar': ($event) => (bar = $event),
})
自定义指令
使用字符串参数时推荐
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-slot应替换为v-slots
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 App2 = {
setup() {
const slots = {
default: () => <div>A</div>,
bar: () => <span>B</span>,
}
return () => <A v-slots={slots} />
},
}
// or you can use object slots when `enableObjectSlots` is not false.
const App3 = {
setup() {
return () => (
<>
<A>
{{
default: () => <div>A</div>,
bar: () => <span>B</span>,
}}
</A>
<B>{() => 'foo'}</B>
</>
)
},
}
在类型脚本中
tsconfig.json数字 :
{
"compilerOptions": {
"jsx": "preserve"
}
}
谁在用
|
蚂蚁设计Vue |
范特语 |
元素加号 |
韦杰森漂亮 |
兼容性
此 repo 仅兼容 :
- 贝贝 7+
- 第3号+