20250407-组件v-model

基本用法

v-model 可以在组件上使用以实现双向绑定。

首先看下 v-model 在原生元素上的用法：

在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：

而当使用在一个组件上时，v-model 会被展开为如下的形式：

要让这个例子实际工作起来，组件内部需要做两件事：

1、将内部原生元素的 value attribute 绑定到 modelValue prop。

2、当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件。

子类代码：

父类代码：

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：