el-dialog 是 element-ui 的一個對話框 組件
組件：需要設置visible屬性，它接收Boolean脱柱，當為true時顯示 Dialog。
場景：
子組件中 使用 el-dialog 且 子組件 呈現(xiàn) 服務器返回的列表數(shù)據(jù)拉馋， 父組件觸發(fā)某事件褐捻，顯示子組件對話框。
子組件每次show出 顯示最新列表椅邓。
存在問題： 子組件 每次show 出 不能去 執(zhí)行created() 函數(shù)柠逞。導致列表為第一次數(shù)據(jù)
原因: 子父組件的生命周期順序
- 加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子組件的更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 父組件的更新過程
父beforeUpdate->父updated
- 銷毀過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
由于 渲染時候，父組件渲染時 - 父組件生命周期執(zhí)行景馁，緊接著子組件也進行渲染執(zhí)行板壮，這時候子組件created() 函數(shù) 已經(jīng)獲取到了列表數(shù)據(jù)。
created() 函數(shù)是 在模板渲染成html前調(diào)用合住，即通常初始化某些屬性值绰精，然后再渲染成視圖撒璧。
所以 再次觸發(fā)父組件事件 ，并不會觸發(fā)渲染子組件 笨使，這時候 created() 函數(shù)中的 更新列表方法 不會執(zhí)行卿樱，列表數(shù)據(jù)仍然為上一次的數(shù)據(jù)。
解決辦法 : 兩種
第一種：父組件中設置 v-if
利用 v-if 實現(xiàn) 子組件主動渲染, 執(zhí)行 created() 函數(shù), 達到更新列表數(shù)據(jù)硫椰。
<div v-if="dialogFormVisible">
// 子組件調(diào)用
<checkStatis
:dialog-form-visible="dialogFormVisible"
:modal-data="modalData"
@closeBtn="closeModal"
/>
</div>
優(yōu)點： 處理簡單
缺點： 根據(jù)表達式的值的來有條件地渲染元素繁调，采用組件銷毀、重建的方式 靶草。（不是很推薦）切換性能消耗大
第二種：子組件使用 watch 監(jiān)聽
父組件 觸發(fā)子組件開啟時 蹄胰， 設置 時間戳 變量，并傳遞給子組件奕翔，通過props 接收裕寨。
// 父組件事件函數(shù)
handleBtn() {
this.showTimeNum = +new Date()
}
// 父組件中使用子組件
<subscribe :showTime="showTimeNum"/>
子組件 通過watch 監(jiān)聽 showTime 達到列表更新
// 設置接收類型以及默認值
props: {
showTime: {
type: Number,
default: 0
}
}
// 子組件 Element
<el-dialog :visible.sync="show" :close-on-click-modal="false"title="子組件對話框" @close="closeBtn">
...... 列表數(shù)據(jù)展示
</el-dialog>
// 監(jiān)聽 變化 獲取新的列表數(shù)據(jù)
watch: {
showTime() {
this.show = true
this.getList() // 獲取列表方法
}
},
缺點： 比第一種能麻煩些
優(yōu)點：數(shù)據(jù)驅動dom呈現(xiàn)。
END————————
碼字不易派继，如果喜歡或者對你有絲毫幫助的話宾袜，幫忙點個?? 哈，點贊就是我的動力驾窟。
同時也希望自己能堅持認真的寫下去试和，因為在總結提升自己的同時如果也能幫助更多的前端，那是多么開心的一件事纫普。
小伙伴們 這里有更好的建議或方法阅悍，歡迎評論，謝謝昨稼。
