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

分享:

當在自訂 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>

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。