vue 自定义组件双向绑定v-model

'vue的双向绑定是针对表单元素，当然可以自定义组件实现双向绑定。
（外部data的字段值赋值给自定义组件的属性，自定义组件通过本身或者内部触发事件，监听自定义组件事件更改data的字段值）
看下例子：
<input type="text" v-model="message">.
...

data: {
        message: "this is a message"，
        ...
}

v-model 作为语法糖，真正实现形式如下：
<input type="text" :value="message" @input="($event) => message = $event.target.value">
1   data中的message赋值到input的value属性，更改了input的value值，是绑定中的单向绑定
2   通过监听input组件的input事件，更改message值，完成双向绑定。

从官网上看到，v-model在内部为不同的表单输入元素使用不同的属性并抛出不同的事件：
text，textarea 使用value属性 与 input事件
select使用value 与 change事件
radio checkbox 使用checked 与change事件

自定义组件实现双向绑定v-model实现如下：
名称为SpecialModel
<template>
    <div>
            <input :value="spVal" @input='($event) => emitEvent($event.target.value)'>click</Button>
    </div>
</template>
<scripts>
    model: {
            prop: 'spVal',             //自定义组件通过该属性获取父组件的字段值
            event: 'changeVal'     // 父组件通过监听自定义组件发出事件，改变
    },
    props: {
        spVal: {
            type: String,
            default: 'jack' 
        }
    },
    ...
    methods: {
        emitEvent: (val) => {
            this.$emit('changeVal',val);
        } 
    }
</script>

父组件中使用自定义组件：
    <template>
        <div>
            <SpecialModel v-model="specialValue" />
        </div>
    </template>
    <scripts>
        data: () => {
            return {
                  specialValue: 'balabalala',
                   ....
            }
         ...
    </scripts>  
    等价于(v-model语法糖的作用）
    <SpecialModel :spVal='specialValue' @changeVal="(val) => specialValue = val" />