Vue.js 基底inputコンポーネントを作る

inputの基底コンポーネントを作る。

• 親コンポーネントから初期値を受け取りたい
• 親コンポーネントに入力を動的に伝えたい

v-modelは使わずに、@inputでそのまま親に変更されたvalueをemitする。

# input基底コンポーネント
Vue.component('baseInput', {
  props: ['initValue'],
  template: `
    <input
      type="text"
      :value="initValue"
      @input="$emit('inputText', $event.target.value)"
    />
  `
})

example

See the Pen vue.js base-input component by tic40 (@ccpzjoh) on CodePen.