了解v-model
我們通常使用v-model在表單控件上趣斤，用來獲取控件values胁澳，v-model指令其實(shí)就是控件input事件+獲取或改變value的語法糖竖瘾，
那么我們在表單控件其他地方使用v-model怎么辦呢桃煎，
例如：我們需要封裝一個彈窗等壹粟，需要用v-model控制彈窗的打開與關(guān)閉，
注意：前提是使用v-model指令
思路
在子組件改變傳遞prop值并同步到父組件中呻此，以此完成父組件控制彈窗開關(guān)。
那么我們首先來介紹一下怎么自定義（重寫）v-model指令
- 子組件有一個model屬性完成修改傳值
<template>
<p class="child">
<p>我是兒子腔寡，父親對我說： {{give}}</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回應(yīng)</a>
</p>
</template>
<script>
export default {
props: {
give: String
},
//將調(diào)用組件的v-model綁定的值轉(zhuǎn)化為give焚鲜，通過$emit進(jìn)行改變
//這種寫法更加規(guī)范話，不用到處著input事件之類的
model: {
//注意：這里是prop
prop: 'give',//完全組件內(nèi)部使用放前，
event: 'returnBack'//組件內(nèi)部$emit定義的函數(shù)
},
methods: {
returnBackFn() {
this.$emit('returnBack', '我是你祖宗');
}
}
}
</script>
使用.sync修飾符
- 可以在父組件v-bind綁定的傳值上使用.sync忿磅，并在子組件$emeit中使用update
這個我在實(shí)際項(xiàng)目中根據(jù)參考鏈接進(jìn)行過測試，但是手寫代碼找不到了凭语，就復(fù)制粘貼一下吧葱她。反正前端大部分都是粘粘粘的。
父組件
<child :isShow.sync="isShow" v-show="isShow"/>
//isShow是需要給子組件的值
子組件
<template>
<div>
我是一個子組件似扔，我在紅色的海洋里吨些！
<input type="button" value="點(diǎn)我隱身" @click="upIsShow">
</div>
</template>
<script>
export default {
methods:{
upIsShow(){
this.$emit("update:isShow",false);
}
}
}
</script>
大家都知道$emit第一次從那時是自定義事件，需要在父組件@fn調(diào)用炒辉，那么子組件中定義的update:isShow在父組件表現(xiàn)形式就是@update:isShow,:isShow.sync=”isShow”其實(shí)是 @update:isShow=”bol=>isShow=bol”語法糖豪墅。
這樣應(yīng)該對.sync修飾符有一定了解了吧。
比較
利用model屬性和.sync修飾符都可以達(dá)到子組件同步修改父組件的value
通過代碼相比較而言黔寇，v-model寫法更簡單偶器，如果是站在封裝組件的角度來看，肯定是組件調(diào)用方法越簡單越好缝裤，不需要特殊的規(guī)則最好屏轰。而.sync需要同時綁定prop和v-show。自定義v-model就可以把這些邏輯全部放在子組件進(jìn)行憋飞，進(jìn)而降低封裝組件調(diào)用難度霎苗。
