最近在寫組件的時候，遇到了 v-model 的使用問題，在 Vue 官方文檔中，有兩小端內容是關于 v-model 指令在組件中的使用,查閱文檔后，依然不得要領，最后幾番折騰，理論結合實踐，終于領悟其精髓，遂成文分享之。

v-model 通常都是運用在表單組件中，在這里我們以一個 select組件為例,組件命名為 a-select。

v-model寫在哪？

第一個問題就是 v-model 指令是寫在子組件里還是父組件里。

我在最開始寫組件時就遇到這個問題，歸根結底是對在組件中使用 v-model 指令的了解還處于混沌的狀態。

文檔中有提到

要讓組件的 v-model 生效，它應該 (在 2.2.0+ 這是可配置的)：

• 接受一個 value 屬性
• 在有新的值時觸發 input 事件

所以我們需要通過觸發事件來實現 value 的更新，而 Vue 中:

父子組件的關系可以總結為 props down, events up

那么很明顯，我們是在父組件里寫 v-model。

子組件怎么更新父組件的值？

那在父組件中我們可以這么寫：

復制代碼

文檔 告訴我們，v-model 只是一個語法糖，實際的含義是：

那在子組件中，怎么更新父組件的值(parentValue)呢？我翻遍了文檔，也沒找到，但我找到了一段看似相關的 定制組件的 v-model，因為其中說了：

默認情況下，一個組件的 v-model 會使用 value 屬性和 input 事件，但是諸如單選框、復選框之類的輸入類型可能把 value 屬性用作了別的目的

同樣，我們的 select 組件的 value 值也被占用，而且沒有 input事件。

看來我們需要定制 v-model 了， 開始之前，我們先來把例子看懂。

Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean, // this allows using the `value` prop for a different purpose value: String }, // ... })

新增的 model 屬性值里有兩個key，分別為 prop、event，值分別為 checked、change，看到這里，我們彎起嘴角，會心一笑。

model 屬性值(model這個名稱真是取得簡明扼要啊)里的兩個key其實就是 v-model 這個語法糖所代表的 prop 和 event，分別表示 該表單元素的值 和 改變元素值時觸發的事件， 在 input 中，這兩個值是value 和 input(默認值)，在 checkbox 中表示 checked 和 change。

以此類推，在 select 中就表示 selected 和 change。

到這里，我就需要指出我們上面說的一個錯誤了，此時的 v-model 在父組件中的實際含義是：

那么我們可以這么來寫子組件：

{{item.text}} export default() { model: { prop: 'selected', event: 'change' }, props: { selectData: { type: Array }, }, methods: { emitChange(value){ this.$emit('change', value); } } }

唯一的問題在于，我們需要在初始化時設置選中項，該怎么辦？我們還有一個 selected 屬性值沒有呢。甚至官網也溫馨提示我們：

注意你仍然需要顯性聲明 checked 屬性。

所以這里我們需要顯性聲明 selected 屬性，不過，因為有 v-model 的存在，我們可以不用在父組件里傳入 selected值，是不是少了一點工作量呢？

所以子組件里是這么寫的： {{item.text}} export default() { model: { prop: 'selected', event: 'change' }, props: { selectData: { type: Array }, selected: { type: [String,Number] } }, methods: { emitChange(value){ this.$emit('change', value); } } }

當然了，作為一個完整的 select 組件，上面的示例其實是很簡陋的。

完整的 select 組件代碼可以看iview

最后分享兩個最近在讀的掘金小冊，大牛果然還是人家的大牛，現階段膜拜還是要有的，我讀了感覺收貨很大，推薦給我的讀者小伙伴們。好看不貴還實惠(其實也是我的)，大概就是人家掘金小冊的定位了吧

---

鏈接文章：

https://juejin.im/post/598bf7a3f265da3e252a1d6a

總結

以上是生活随笔為你收集整理的android中怎么保存checkbox中的checked属性_Vue 精粹：v-model指令在组件中怎么玩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。