如果你想在自定义的组件上使用 v-model 需要特别处理一下。先去新建一个组件，放在 src/app/components 的下面，名字是 app-input.vue 。 一组 template ，里面添加一个 text 类型的 input 元素。保存一下文件。

打开 UserLogin 组件，在这个组件里可以用一下刚才创建的 AppInput，先导入这个组件，名字是 AppInput，来自当前目录下的 app-input.vue 。

然后在组件的 components 里面，添加一个 AppInput，在组件的模板里面，用一下 AppInput ，再用 v-model 绑定一个数据，名字叫 username。

在组件里面再添加一个数据，名字叫 username，默认让它等于一个空白。找个地方可以绑定输出组件里的 username 这个数据的值。

下面再到浏览器上测试一下，在这个文本框里输入点内容。你会现，并没更新组件里的 username 这个数据。

我们得知道，在自定义的组件上使用 v-model 相当于做了些什么，这里就相当于是给这个组件绑定了一个叫 modelValue 的属性，然后监听了一下这个组件的 update:modelValue 这个事件，发生这个事件的时候，会设置 给 modelValue 设置的那个数据的值，会让它等于 $event。

所以，如果你想在自定义的组件上使用 v-model，需要再去处理一下这个自定义的组件。 添加一组 script ，默认导出一个对象，里面添加一个 props ，它的值是可以是一个对象，里面是这个组件支持的一些属性，这里要添加一个叫 modelValue 的属性，属性的值的类型是 String。

然后在组件模板里用的这个 input 元素上面，要绑定一个 value 属性，它的值就是 modelValue 的值。 然后再监听一下元素的 input 事件，发生这种事件的时候，触发一个自定义的事件，$emit ，事件的名字叫 update:modelValue ，对应的值设置成 $event.target.value，也就是当前这个文本框的值。

回到浏览器测试一下，在文本框里输入点内容，这次就可以更新组件里的 username 这个数据了。现在我们使用这个自定义的组件的时候，可以用 v-model 替换一下这种写法。再回到浏览器上试一下，在文本框里输入点内容，你会发现，这次会实时的更新用 v-model 绑定在这个自定义组件上的 username 这个数据。