Vue — el-dialog 父子组件,子组件数据更新

el-dialog 是 element-ui 的一个对话框 组件

组件:需要设置visible属性,它接收Boolean,当为true时显示 Dialog。

场景:

  1. 子组件中 使用 el-dialog 且 子组件 呈现 服务器返回的列表数据, 父组件触发某事件,显示子组件对话框。

  2. 子组件每次show出 显示最新列表。

存在问题: 子组件 每次show 出 不能去 执行created() 函数。导致列表为第一次数据

原因: 子父组件的生命周期顺序

  1. 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

  1. 子组件的更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated

  1. 父组件的更新过程
父beforeUpdate->父updated

  1. 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

由于 渲染时候,父组件渲染时 - 父组件生命周期执行,紧接着子组件也进行渲染执行,这时候子组件created() 函数 已经获取到了列表数据。

created() 函数是 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

所以 再次触发父组件事件 ,并不会触发渲染子组件 ,这时候 created() 函数中的 更新列表方法 不会执行,列表数据仍然为上一次的数据。

解决办法 : 两种

第一种:父组件中设置 v-if

利用 v-if 实现 子组件主动渲染, 执行 created() 函数, 达到更新列表数据。

// 子组件调用

优点: 处理简单

缺点: 根据表达式的值的来有条件地渲染元素,采用组件销毁、重建的方式 。(不是很推荐)切换性能消耗大

第二种:子组件使用 watch 监听

父组件 触发子组件开启时 , 设置 时间戳 变量,并传递给子组件,通过props 接收。

// 父组件事件函数

handleBtn() {

  this.showTimeNum = +new Date()

}

// 父组件中使用子组件



子组件 通过watch 监听 showTime 达到列表更新

// 设置接收类型以及默认值

props: {

  showTime: {

  type: Number,

  default: 0

  }

}

// 子组件 Element



...... 列表数据展示



// 监听 变化 获取新的列表数据

watch: {

  showTime() {

    this.show = true

    this.getList() // 获取列表方法

  }

},

缺点: 比第一种能麻烦些

优点:数据驱动dom呈现。

END————————

码字不易,如果喜欢或者对你有丝毫帮助的话,帮忙点个 哈,点赞就是我的动力。

同时也希望自己能坚持认真的写下去,因为在总结提升自己的同时如果也能帮助更多的前端,那是多么开心的一件事。

小伙伴们 这里有更好的建议或方法,欢迎评论,谢谢。

你可能感兴趣的:(Vue — el-dialog 父子组件,子组件数据更新)