el-dialog 是 element-ui 的一个对话框 组件
组件：需要设置visible属性，它接收Boolean，当为true时显示 Dialog。
场景：
-
子组件中 使用 el-dialog 且 子组件 呈现 服务器返回的列表数据， 父组件触发某事件，显示子组件对话框。
-
子组件每次show出 显示最新列表。
存在问题： 子组件 每次show 出 不能去 执行created() 函数。导致列表为第一次数据
原因: 子父组件的生命周期顺序
- 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件的更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件的更新过程
父beforeUpdate->父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
由于 渲染时候，父组件渲染时 - 父组件生命周期执行，紧接着子组件也进行渲染执行，这时候子组件created() 函数 已经获取到了列表数据。
created() 函数是 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
所以 再次触发父组件事件 ，并不会触发渲染子组件 ，这时候 created() 函数中的 更新列表方法 不会执行，列表数据仍然为上一次的数据。
解决办法 : 两种
第一种：父组件中设置 v-if
利用 v-if 实现 子组件主动渲染, 执行 created() 函数, 达到更新列表数据。
<div v-if="dialogFormVisible">
// 子组件调用
<checkStatis
:dialog-form-visible="dialogFormVisible"
:modal-data="modalData"
@closeBtn="closeModal"
/>
</div>
优点： 处理简单
缺点： 根据表达式的值的来有条件地渲染元素，采用组件销毁、重建的方式 。（不是很推荐）切换性能消耗大
第二种：子组件使用 watch 监听
父组件 触发子组件开启时 ， 设置 时间戳 变量，并传递给子组件，通过props 接收。
// 父组件事件函数
handleBtn() {
this.showTimeNum = +new Date()
}
// 父组件中使用子组件
<subscribe :showTime="showTimeNum"/>
子组件 通过watch 监听 showTime 达到列表更新
// 设置接收类型以及默认值
props: {
showTime: {
type: Number,
default: 0
}
}
// 子组件 Element
<el-dialog :visible.sync="show" :close-on-click-modal="false"title="子组件对话框" @close="closeBtn">
...... 列表数据展示
</el-dialog>
// 监听 变化 获取新的列表数据
watch: {
showTime() {
this.show = true
this.getList() // 获取列表方法
}
},
缺点： 比第一种能麻烦些
优点：数据驱动dom呈现。
END————————
码字不易，如果喜欢或者对你有丝毫帮助的话，帮忙点个👍 哈，点赞就是我的动力。
同时也希望自己能坚持认真的写下去，因为在总结提升自己的同时如果也能帮助更多的前端，那是多么开心的一件事。
小伙伴们 这里有更好的建议或方法，欢迎评论，谢谢。
网友评论