vue实现密码显示与隐藏按钮的自定义组件功能

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

<template>
<div>
  <input :type='show?"text":"password"' :value="inputvalue" 
@input="inputvalue=$event.target.value" :placeholder='placeholder'/>
  <i :title="show?'隐藏密码':'显示密码'" @click="changePass" 
style="cursor:pointer;">{{show?'隐藏':'显示'}}</i>
</div>
</template>
 
<script>
export default {
  props: {
    value: {
      default: "",
      type: String
    },
    placeholder: {
      default: "",
      type: String
    },
  },
  data(){
    return{
      inputvalue:"",
      show:false,//密码显示或隐藏的Boolean,默认false，密码不显示
    }
  },
  watch:{
    inputvalue(news,olds){
      this.$emit("input",news);
    }
  },
  mounted(){
    this.inputvalue=this.value;
  },
  methods:{
    changePass(){
      this.show=!this.show;
    }
  }
}
</script>
<style>
</style>

<input-password v-model="value"></input-password>

inputvalue(news,olds){
      this.$emit("update:value",news);
    },

<input-password :value.sync="value"></input-password>