深入瞭解vue自定義組件之v-model

官方文檔地址
v-model大多用於input組件，默認會利用名爲 value 的 prop 和名爲 input 的事件，但是像單選框、複選框等類型的輸入控件可能會將 value 特性用於不同的目的
可以使用組件的model來自定義prop和事件
自定義checkbox組件

<template>
    <div>
        <label>我是label
			<input type="checkbox" v-on:change="$emit('callBack', $event.target.checked)" v-bind:checked="c" />
		</label>
        
    </div>
</template>

<script>
    export default {
        name: "ModelDemo",
        props: {
            c: Boolean
        },
        model: {
            prop: 'c',
            event: 'callBack'
        },
    }
</script>

父組件

<template>
    <div>
        <model-demo v-model="checked" ></model-demo>
    </div>
</template>

<script>
    import ModelDemo from "@/components/ModelDemo";
    export default {
        name: "home",
        components: {
            ModelDemo
        },
        data: () => ({
            checked: true
        }),
        watch: {
            checked(n, o){
                // eslint-disable-next-line no-console
                console.log(n)
                // eslint-disable-next-line no-console
                console.log(o)
            }
        }
    }
</script>

父組件中通過v-model將data中的checked傳給自定義組件，自定義組件通過model的prop屬性將接收到的checked賦值給props的c，自定義組件再通過v-bind將input標籤的checked和props的c進行綁定。
自定義組件中model的event是一個回調函數，當checkbox狀態發生變化時，會執行這個回調函數，並將狀態傳給父組件v-model綁定的checked

下面是vue處理model的源碼，中文註釋爲筆者自己加的

// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel (options, data) {
  var prop = (options.model && options.model.prop) || 'value';//如果沒有設置model.prop,默認取名爲value的prop
  var event = (options.model && options.model.event) || 'input'//如果沒有設置model.event,默認取名爲input的事件回調函數
  ;(data.attrs || (data.attrs = {}))[prop] = data.model.value;
  var on = data.on || (data.on = {});
  var existing = on[event];
  var callback = data.model.callback;
  if (isDef(existing)) {
    if (
      Array.isArray(existing)
        ? existing.indexOf(callback) === -1
        : existing !== callback
    ) {
      on[event] = [callback].concat(existing);
    }
  } else {
    on[event] = callback;
  }
}