'vue的雙向綁定是針對表單元素，當然可以自定義組件實現(xiàn)雙向綁定鸟召。
（外部data的字段值賦值給自定義組件的屬性胆绊，自定義組件通過本身或者內部觸發(fā)事件，監(jiān)聽自定義組件事件更改data的字段值）
看下例子：
<input type="text" v-model="message">.
...
data: {
? ? ? ? message: "this is a message"欧募，
? ? ? ? ...
}
v-model 作為語法糖压状，真正實現(xiàn)形式如下：
<input?type="text" :value="message" @input="($event) => message = $event.target.value">
1? ?data中的message賦值到input的value屬性，更改了input的value值跟继，是綁定中的單向綁定
2? ?通過監(jiān)聽input組件的input事件种冬，更改message值，完成雙向綁定舔糖。
從官網(wǎng)上看到娱两，v-model在內部為不同的表單輸入元素使用不同的屬性并拋出不同的事件：
text，textarea 使用value屬性 與 input事件
select使用value 與 change事件
radio checkbox 使用checked 與change事件
自定義組件實現(xiàn)雙向綁定v-model實現(xiàn)如下：
名稱為SpecialModel
<template>
? ? <div>
? ? ? ? ? ? <input :value="spVal" @input='($event) => emitEvent($event.target.value)'>click</Button>
? ? </div>
</template>
<scripts>
? ? model: {
? ? ? ? ? ? prop: 'spVal',? ? ? ? ? ? ?//自定義組件通過該屬性獲取父組件的字段值
? ? ? ? ? ? event: 'changeVal'? ? ?// 父組件通過監(jiān)聽自定義組件發(fā)出事件金吗，改變
? ? },
? ? 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" />
