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

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

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

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

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

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