vue之子组件调用父组件的方法

遇到一个需求:
vue之子组件调用父组件的方法_第1张图片
如图,表格是父组件,组件加载的时候,调用getAddress()从后台获取数据
vue之子组件调用父组件的方法_第2张图片

点击编辑按钮弹出一个框
vue之子组件调用父组件的方法_第3张图片
弹出框是子组件,用来编辑表格里面的信息,遇到了一个问题,弹框保存以后,页面上未能及时显示出改变以后的数据,
vue之子组件调用父组件的方法_第4张图片
一开始使用了页面刷新的办法,但是感觉每次编辑都要刷新,体验不好,于是想用另外的方法,在子组件里触发父组件的getAddress()方法
于是在子组件中添加了代码
vue之子组件调用父组件的方法_第5张图片
但是测试不生效,经过查资料显示,子组件触发父组件的方法,单单这么写是不对的.
应该在子组件中用@接收一下,在$emit触发
于是修改父组件代码
这里写图片描述
给子组件传了一个方法getAddress,命名为save
子组件触发save即可
vue之子组件调用父组件的方法_第6张图片
经过测试,生效了

你可能感兴趣的:(vue)