TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊
// currency-input是子組件。外層是父組件。
<currency-input v-model="price"></currency-input>
// 這里的v-model是語法糖，其實(shí)就是：
<currency-input v-bind:value="price" @input="input"></currency-input>
// 你打紅框的是從父組件傳遞過去的price值。
this.$emit('input', Number(formattedValue))
// 這句是把結(jié)果值傳遞回父組件，供父組件使用。
// 比如父組件長(zhǎng)這樣：
<div>
組件
<currency-input v-model="price"></currency-input>
</div>
new Vue({
data:{},
methods:{},
});
建議多看幾次，Vue文檔：自定義事件
并動(dòng)手實(shí)踐。
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊
1、在這個(gè)例子中currency-input是組件，其內(nèi)沒有子組件。
2、<currency-input v-model="price"></currency-input>
等價(jià)于
<currency-input v-bind:value="price"></currency-input>
至于 template 里的<input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)">
等價(jià)于
<input ref="input" v-model="value" v-on:input="updateValue($event.target.value)">
3、this.$emit('input', Number(formattedValue))
是用于傳值給currency-input的上層組件。
因?yàn)檫@里的v-model不像input的v-model那樣可以雙向綁定，這里的v-model只是個(gè)語法糖，是作為值傳遞的，所以需要：
在有新的值時(shí)觸發(fā) input 事件并將新值作為參數(shù)
在這里 vue 在背后幫我們做了處理更新了value，而不需要我們v-on來接受 input 事件后再去改變value值。
舉報(bào)