vue2升级vue3：Vue3时jsx组件绑定自定义的事件、v-model、sync修
原创vue2升级vue3：Vue3时jsx组件绑定自定义的事件、v-model、sync修
原创
踩坑笔记：组合式 API之Setup(props,context)—Vue2.x到Vue3注意
Vue2的.sync修饰符转Vue3中v-model
可以先看vue2的 .sync 修饰符 文档： https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符
在父组件中的
<div :title.sync="visible" ></div>等同于: / .sync将针对于title的监听事件缩写 /
<div :title="visible" @update:title="visible = $event" ></div>在子组件的methods中使用如下将新的value传给父级：
handleClose() {
this.$emit('update:title', newValue)
}Vue3中用v-model替代了.sync修饰符和组件的model选项
vue3 v-model
具体看看官方文档：https://v3.cn.vuejs.org/guide/migration/v-model.html
比如：
<ChildComponent v-model="pageTitle" />
<ChildComponent title.sync ="pageTitle" content.sync ="pageContent" />在vue3里面的写法是
<div v-model:title="visible" ></div>
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />注意点：
所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue
<ChildComponent v-model="pageTitle" />js代码
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value：String`
},
emits: ['update:modelValue'],
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
}
}
}Vue3 jsx组件绑定自定义的事件、v-model使用
绑定的事件名称前面加上on，事件名改为驼峰命名法并且首字母大写，拼接上前面的on即可绑定自定义事件。跟onClick绑定事件方式一致。
renderDropdown(h){
return <el-dropdown onVisibleChange={val => { console.log(val) }}> code...</el-dropdown>
}Vue3 jsx新特性，支持v-model使用，如果组件的v-mdel是modelValue的话，那使用很简单
renderDropdown(h){
const value = "value"
return <custom-component v-mode={value}>
code...
</custom-component>
}在Vue2里面，v-mode必须使用value的prop，用法不够灵活。
vue3默认绑定的v-model是modelValue，但是允许开发人员自定义v-model绑定的prop，例如v-model:title="pageTitle"改为绑定title值，使用起来也是很方便，但是在jsx里面使用就不是这样了
举例：比如el-popover的v-model绑定visible，那么要把visible这个绑定的prop名称放进数组的第二元素里面，第一个属性放传递给el-popover组件的变量名
renderDropdown(h){
const show = "true"
// return <el-popover v-model:visible={show}> //报错
return <el-popover v-model={[show, 'visible']}>
code...
</el-popover>
}虽然 v-model 也能用，但是建议在 JSX 中使用驼峰 (vModel)
修饰符：使用 (_) 代替 (.) (vModel_trim={this.test})
// template<input v-model="val" />
<input v-model:name="val">
<input v-model.trim="val">
<input v-model:name.trim="val">
// tsx
<input v-model={val} />
<input v-model={[val, 'name']} />
<input v-model={[val, ['trim']]} />
<input v-model={[val, 'name', ['trim']]} />v-models
// template
<A v-model="foo" v-model:bar="bar" />
// tsx
<A v-models={[[foo], [bar, "bar"]]} />自定义指令
const App = {
directives: { antRef },
setup() {
return () => (
<a
vAntRef={(ref) => { this.ref = ref; }}
/>
);
},
}没事可以去吃个瓜： https://github.com/vuejs/jsx/issues/141
参考文章：
Vue2的.sync修饰符转Vue3中v-model https://segmentfault.com/a/1190000039299633
Vue3 jsx组件绑定自定义的事件、v-model使用 https://blog.csdn.net/RkHker/article/details/111375264
在Vue 3中使用Typescript和Jsx https://segmentfault.com/a/1190000039936587
转载本站文章《vue2升级vue3：Vue3时jsx组件绑定自定义的事件、v-model、sync修》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8697.html
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。