vue2 升级 vue3：Vue3 时 jsx 组件绑定自定义的事件、v-model、sync 修

2022 年 6 月 21 日
本文字数：1769 字
阅读完需：约 6 分钟

踩坑笔记：组合式 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

vue3 v-model v-bind anatomy

比如：

<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.vueexport 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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/e1739cbca7ae598f947526c63】。文章转载请联系作者。

zhoulujun

关注

还未添加个人签名 2021.06.25 加入

还未添加个人简介

发布

暂无评论

创作场景

vue2 升级 vue3：Vue3 时 jsx 组件绑定自定义的事件、v-model、sync 修

Vue2 的.sync 修饰符转 Vue3 中 v-model

vue3 v-model

Vue3 jsx 组件绑定自定义的事件、v-model 使用

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

自定义指令

zhoulujun

评论