Vue.js
v-モデルによるカスタムコンポーネント
サーチ…
前書き
しばしば、データに対していくつかのアクション/操作を実行するいくつかのコンポーネントを作成しなければならず、それを親コンポーネントに必要とします。ほとんどの場合、 vuex
はより良い解決策になりますが、子コンポーネントの動作がアプリケーションの状態とはまったく関係しない場合は、次のようになります。範囲スライダ、日付/時刻ピッカー、ファイルリーダー
各コンポーネントが使用されるたびに個々の店舗を持つことは複雑になります。
備考
コンポーネントにv-model
を使用するには、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