Vue.js
v-モデルによるカスタムコンポーネント

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript
サーチ…


前書き

しばしば、データに対していくつかのアクション/操作を実行するいくつかのコンポーネントを作成しなければならず、それを親コンポーネントに必要とします。ほとんどの場合、 vuexはより良い解決策になりますが、子コンポーネントの動作がアプリケーションの状態とはまったく関係しない場合は、次のようになります。範囲スライダ、日付/時刻ピッカー、ファイルリーダー

各コンポーネントが使用されるたびに個々の店舗を持つことは複雑になります。

備考

コンポーネントにv-modelを使用するには、2つの条件を満たす必要があります。

  1. それは '値'という名前の小道具を持っているはずです
  2. 親コンポーネントが期待する値でinputイベントを送出する必要があります。 
<component v-model='something'></component>

の構文の砂糖です

<component
    :value="something"
    @input="something = $event.target.value"
>
</component>

カウンタコンポーネント上のvモデル

counterは、 v-modelを使用する親コンポーネントであるdemoによってアクセスされる子コンポーネントです。 

// child component
Vue.component('counter', {
  template: `<div><button @click='add'>+1</button>
  <button @click='sub'>-1</button>
  <div>this is inside the child component: {{ result }}</div></div>`,
  data () {
    return {
      result: 0
    }
  },
  props: ['value'],
  methods: {
    emitResult () {
      this.$emit('input', this.result)
    },
    add () {
      this.result += 1
      this.emitResult()
    },
    sub () {
      this.result -= 1
      this.emitResult()
    }
  }  
})

この子コンポーネントは、 sub() add()メソッドまたはadd()メソッドが呼び出されるたびにresultます。 

// parent component
new Vue({
  el: '#demo',
  data () {
    return {
      resultFromChild: null
    }
  }
})

// parent template
<div id='demo'>
  <counter v-model='resultFromChild'></counter>
  This is in parent component {{ resultFromChild }}
</div>

v-modelは子コンポーネントに存在するため、名前value持つ小道具が同時に送信されました。子コンポーネントからの値を順番に提供するcounter入力イベントがあります。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow