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