v-if和:visible.sync的使用技巧

今天在vue開發中，遇到點擊按鈕顯示彈窗，輸入部分數據后退出彈窗初始化彈窗信息的要求。如果通過父子組件穿數據的方式來實現就太麻煩了，可以通過結合v-if和:visible.sync的方式來實現：

 

 

 其中，v-if控制元素的存在與否（詳情可參考vue中v-show和v-if在顯示和隱藏元素上的區別：https://www.cnblogs.com/yingyigongzi/p/10875072.html），:visible.sync控制el-dialog的顯示，當我們退出彈窗時會銷毀子組件的變量，實現子組件初始化，下次進入就不會攜帶上次輸入的信息了。

這里記錄一下:visible.sync的原理，他是一個語法糖，用於子組件修改父組件中的值，實現雙向綁定功能。實現原理如下：

// 父組件
<home :title.sync="title" />
//編譯時會被擴展為
<home :title="title"  @update:title="val => title = val"/>

// 子組件
// 所以子組件可以通過$emit 觸發 update 方法改變
mounted(){
  this.$emit("update:title", '這是新的title')
}