假設我有兩個組件,其中一個只是一個簡單的輸入:
現在假設我有一個父元素,我想用v-model來系結子輸入的 偽代碼: 這樣一來,Child的輸入值就活在Child組件的狀態之外。(或者它同時存在于兩個組件中并被系結在一起。) 問題是,如何才能使子組件的輸入值在子組件的狀態之外?
問題是我如何將父組件中的變數與子組件中的輸入進行雙向的資料系結?
(我使用的是vue3)
(如果有這方面的最佳實踐,請告訴我。
uj5u.com熱心網友回復: 你可以使用
標籤:<!
<!-- Child.vue -->
<模板>
<input v-model="value" />
</template>
value。
<!-- Form.vue -->
<模板>
<Child v-model:value="parentVariable"/>
</template>
emit和props來傳播v-model到父組件來自檔案的例子:
app.component('custom-input'/span>, {
props: ['modelValue']。
emits: ['update:modelValue']。
template: `
<input v-model="value">
`。
computed: {
value: {
get() {
return this.modelValue。
},
set(value){
this.$emit('update:modelValue', value)
}
}
}
})
