[Vue.js] Vue3 透過 v-model 在 component 傳遞資料

標籤: Vue.js Vue3 javascript

當在自訂 component 使用 v-model 時,component 接收一個 modelValue 的值,然後透過觸發 update:modelValue 事件來更新該值。

<custom-input v-model="searchText">

等同於

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

然後像這樣我們就能從外部給值跟取得在 component 內輸入的值。

 

如果我們要綁定兩個以上的 v-model,可以像這樣把變數傳進去:

<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>