Vueカスタムコンポーネント--入力ボックスの双方向バインド--入力方式の入力ボックスを自動的に切り替えます

最もシンプルなInputのパッケージ
HtmlInput.vue

export default {
  props: {
    //         v-model  
    value: {
      default: ''
    }
  },
  methods: {
    //        v-model     ,       
    input(e) {
      this.$emit('input', e.target.value)
    }
  }
}

使用例

import HtmlInput from './HtmlInput.vue'
export default {
  components: {
    HtmlInput,
  },
  data() {
    return {
      inputValue: '123',
  },
}

例2:強制英語入力方式の入力ボックス
パスワード入力ボックスを利用して、自動的に英語入力法に切り替え、入力ボックスの上にもう一つのテキストを置いて、明文を同期表示します.

export default {
  props: {
    value: {
      default: undefined
    }
  },
  methods: {
    //       
    input(e) {
      this.$emit('input', e.target.value)
    }
  }
}