如何将Vue中密码显示与隐藏按钮的自定义组件功能改写为长尾？

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

思路+实现组件实现有两种思路：

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

2.v-model形式+v-model实现

v-model形式需要自定义组件中定义一个inputValue值，因为Vue中v-model默认是input或select元素的value属性，所以需要自定义inputValue值。实现：

1.使用v-model进行双向绑定

2.使用prop的.sync修饰符进行父子组件通信

思路

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

1.v-model形式

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