用户登录

如果你想在自定义的组件上使用 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 这个数据。

在自定义组件上使用 v-model《 Vue.js 前端应用 #4:高级组件 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点