眾所周知vue是單向資料流，所以一般情況下是不能直接修改父元件通過prop傳遞給子元件的值。如果強行修改那麼下面這個警告資訊你一定不會陌生
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.
但是實際開發中我們常常會遇到需要對prop進行雙向繫結的情況，最常見的應用場景就是dialog框。我們需要在點選關閉按鈕的時候改變父元件傳過來的控制dialog顯示或隱藏的prop值
解決辦法：使用.sync修飾符 文件參考
舉個例子：
父元件：
<father :isShow.sync = 'isShow'></father>
複製程式碼實際上面的:isShow.sync是:update:isShow的縮寫
子元件：
<template>
<div class="child" v-if="isShow">
<div>這是子元件</div>
<div class="closeBtn" @click = "close">這是關閉按鈕</div>
<div>
</template>
<script>
export default {
props: ['isShow'],
methods: {
close(){
this.$emit("update:isShow", false);
}
}
}
</script>
複製程式碼通過this.$emit("update:isShow", false);將prop的新值傳遞給父元件從而實現了一個簡單的prop的雙向繫結
除了通過這種方式外還可以在data裡宣告一個新的變數來儲存prop並通過watch來監聽prop的改變再通過計算屬性的方式來動態改變prop的值。