complete v-model article 🐼 🐞 🐙

Author: ccforward

Blog/65.从 Vue.js 自定义输入框深入理解 v-model.md

@@ -132,6 +132,159 @@ input输入框上的 `v-model` 只是一个简化的指令，它的双向绑定
 
 ## `v-model` 在自定义组件中的使用
 
+自定义组件中也可以使用 `v-model`
+
+```html
+<custom-component v-model="custom" />
+```
+
+和这种用法是一样的:
+
+```html
+<custom-component :value="custom" @input="val => custom = val" />
+```
+
+在 2.2.0+ 的版本中可以使用 `model` 属性在自定义组件中来实现属性和事件的自定义：
+
+```js
+export default {
+  name: 'custom-component',
+  model: {
+    prop: 'customVal',
+    event: 'customEvent'
+  }
+}
+```
+
+`v-model` 将会查询所有的属性来替代 `value` 属性，并使用 `prop` 中来替代 `input` 事件的监听。  
+因此上面的那个 `custom-component` 组件被改写为
+
+```html
+<custom-component :customVal="custom" @customEvent="val => custom = val" />
+```
+
+### 自定义 `radio` 按钮中使用 `v-model` 
+
+用 `label` 标签来做模拟一个简单的实现：
+
+```html
+<template>
+  <label>
+    <input type="radio" :checked="checkVal" :value="value" @change="update">
+    {{ label }}
+  </label>
+</template>
+<script>
+export default {
+  model: {
+    prop: 'modelVal',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: String,
+    },
+    modelVal: {
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true
+    },
+  },
+  computed: {
+    checkVal() {
+      return this.modelVal == this.value
+    }
+  },
+  methods: {
+    update() {
+      this.$emit('change', this.value)
+    }
+  }
+}
+</script>
+```
+
+这里只是做模拟所以 `props` 中只写了这里能用到的属性
+
+### 自定义 `checkbox` 按钮中使用 `v-model` 
+
+因为要支持单个 `true false` 类型的 `checkbox`（同时支持 `true-value` `false-value`）和多个 `checkbox`，将所有选中的值存入数组中。因此这里的代码就稍微复杂了一些。
+
+其实只要把上面 `checkbox` `v-model` 代码的实现再增加些判断逻辑就能实现：
+
+```html
+<template>
+  <label>
+    <input type="checkbox" :checked="checkVal" :value="value" @change="update">
+    {{ label }}
+  </label>
+</template>
+<script>
+export default {
+  model: {
+    prop: 'modelVal',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: String,
+    },
+    modelVal: {
+      default: false
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    // 定义 true-value  false-value
+    trueValue: {
+      default: true
+    },
+    falseValue: {
+      default: false
+    }
+  },
+  computed: {
+    checkVal() {
+      // 判断是一个还是多个 checkbox
+      if (this.modelVal instanceof Array) {
+        return this.modelVal.includes(this.value)
+      }
+      return this.modelVal === this.trueValue
+    }
+  },
+  methods: {
+    update(event) {
+      const isChecked = event.target.checked
+      // 这里也要判断是一个还是多个 checkbox
+      if (this.modelVal instanceof Array) {
+        const newVal = [...this.modelVal]
+        if (isChecked) {
+          newVal.push(this.value)
+        } else {
+          newVal.splice(newVal.indexOf(this.value), 1)
+        }
+        this.$emit('change', newVal)
+      } else {
+        this.$emit('change', isChecked ? this.trueValue : this.falseValue)
+      }
+    }
+  }
+}
+</script>
+```
+
+上面自定义的组件代码也不是很复杂，只是为了通过代码解释下 `v-model` 在内部是如何工作的，所以功能肯定不完整。
+
+## 最后
+
+vue.js 官方以提供了很多优秀的[第三方组件库](https://github.com/vuejs/awesome-vue#frameworks)，自定义组件的实现原理其实也大同小异。
+
+
+
+