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

2. 子组件的更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

3. 父组件的更新过程

父beforeUpdate->父updated

4. 销毁过程

父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————————

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

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

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