vue 父组件调用子组件中的方法 解决刷新后子组件通过props从父组件接受的数据丢失问题
父组件调用子组件中的方法 解决刷新后子组件通过props从父组件接受的数据丢失问题
问题描述:如图:刚开往网页的时候,子组件中的查询条件的下拉框的数据是有的,但是一旦点击浏览器的刷新后,数据就丢失了.
说明:子组件通过props从父组件接受的数据
解决方法,在父组件的请求数据成功后调用子组件的一个方法,这个方法可以将子组件的查询条件的下拉框的数据从新组织一遍.
父组件如何引用子组件中的方法:
1. 在父组件中 用 import 引入子组件
2. 父组件中调用子组件的地方,给子组件用ref属性,以便获取到子组件,如图:
说明,我这边是用 router-view连接到子组件的,所以直接在router-view中用属性ref即可.
3. 调用子组件中的方法:
说明: 我这里是在父组件中请求数据成功后调用子组件的方法,以防子组件的接收的数据丢失.
updateKey()是在子组件中定义的方法 ,改方法给子组件中的查询的下拉框的数据从新赋值,以免刷新后数据丢失.