如何自定义Vue组件实现密码显示隐藏切换功能？

本文共计703个文字，预计阅读时间需要3分钟。

思维+实现组件有以下两个思路：

1.使用v-model进行双向绑定：一个是通过v-model实现的双向绑定，另一个是使用prop的.sync修饰符进行父子组件通信。

2.v-model的形式与实现：v-model需要在自定义组件中定义一个inputValue值，因为Vue中默认使用v-model绑定的值为value，而input元素默认绑定的值为value，所以需要自定义一个值来匹配。

思路

实现该组件有两个思路，一个使用v-model进行双向绑定，一个是使用prop的.sync修饰符、父子组件通信。

1.v-model形式

v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向绑定，子组件中的input数据绑定可以使用v-model，也可以使用实现v-model的原理语法糖，下面两种方式都可作为子组件中的数据绑定。

<input type="password" v-model="inputvalue"/> <input type="password" :value="inputvalue" @input="inputvalue=$event.target.value"/>

关于v-model的实现可查看其他关于v-model的实现文章。

最后实现的子组件文件如下，这里的显示隐藏的点击使用的是文字，实际使用时可使用对应的icon字体图标，并设定一定的样式。