很多同学对 Vue 的第一印象就是“响应式”、“双向绑定”等特性,而 v-model 就是实现双向绑定的语法糖,用过 Vue 的小伙伴一定都非常熟悉。但是在 Vue3 中,v-model 发生了一些改动,使得它不再兼容 Vue2 的用法,具体是什么呢,我们一起来看看。

非兼容:用于自定义组件时,v-model prop 和事件默认名称已更改:

  • prop:value -> modelValue
  • 事件:input -> update:modelValue

非兼容v-bind.sync 修饰符和组件的 model 选项已移除,可在 v-model 上加一个参数代替;

新增:现在可以在同一个组件上使用多个 v-model 绑定;
新增:现在可以自定义 v-model 修饰符。

2.x 语法

在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

这里 v-model 实际上就是为表单元素定制的,input 事件和 value prop 都是强耦合的

如果想要更改 prop 或事件名称,则需要在 ChildComponent 组件中添加 model 选项:

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以,在这个例子中 v-model 是以下的简写:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

某些情况下,我们可能需要对某个 prop 进行“双向绑定”,例如一个弹框组件的显示隐藏,既可以从组件外面进行控制,也可以从组件内部去控制。为此,我们建议使用 update:myPropName 抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:

this.$emit('update:title', newValue)

然后父组件可以在需要时监听该事件,并更新本地的 data property。例如:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见,我们可以使用 .sync 修饰符来缩写,如下所示:

<ChildComponent :title.sync="pageTitle" />

.sync 实际上就是上面的语法糖,可以看到其实和 v-model 用法非常相似

3.x 语法

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

若需要更改 model 的名称,现在我们可以为 v-model 传递一个参数,以作为组件内 model 选项的替代:

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

在这里插入图片描述
这也可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 是以下的简写: -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

题外话

在 React 中如何实现类似功能?通过将修改状态的代码包裹在函数中,作为 prop 传递给子组件,子组件调用之后,闭包的引用发生变化,导致父组件状态被修改,进而改变传入子组件的 prop 的值:

const Parent = () => {
	const [count, setCount] = React.useState(0);
	const plusOne = () => setCount(count + 1);
	return (
		<Child count={count} onClick={plusOne} />
	)
}

const Child = ({ count, onClick }) => {
	return (
		<>
			<span>{count}</span>
			<button onClick={onClick}>点我</button>
		</>
	)
}

参考

Vue3 官方文档 - v-model

Logo

前往低代码交流专区

更多推荐