vue2 解决父组件刷新子组件数据

在使用elementui开发pc端项目时，经常会有这样的业务场景，比如，在页面中有一个按钮，点击按钮打开一个弹框，弹框里面有一些表单项或其他的数据源，如果把按钮所在的页面作为父组件，弹框中的内容作为子组件，父组件点击按钮想要每次都能初始化子组件中的数据，会发现mounted生命周期只会调用一次，如果想要每次打开都能刷新子组件的数据，一般会有以下几种解决方式。

方法1、在子组件上面加一个key，这个key可以设置成一个时间戳，也可以是一个递增的数字，每次打开弹框的时候，子组件都会重新走mounted生命周期函数，可以解决问题，但不建议使用，原因是，此种方法，每次关闭弹框时，弹框的dom节点都会销毁。

方法2、在子组件中加一个 v-if 的判断，v-if = 'true' 时，会销毁组件重新渲染，同样能解决问题，但不推荐使用，原因同方法1。

 方法3、在父组件中调用子组件中的定义的页面初始化方法，可以解决问题，存在的小问题，父子组件耦合太高。

父组件页面

子组件页面

方法4、父组件传递给子组件一个visible的属性，每当弹框打开时，子组件通过watch监听父组件传过来的visible属性，每当visible为true时，调用刷新子组件数据的方法。

 父组件页面

子组件页面有两种写法，子组件页面方法一

 子组件页面方法二：