vue 子父组件传值，this.$emit 的使用

在最近项目中，需要用到页面嵌套组件相互传值，vue的路由跳转传值等问题，今日记录一下，以备日后所需

问题：子父页面组件嵌套，刷新后父级页面数据丢失，造成界面显示异常，出现众多的空白

思考：可以考虑在页面路由跳转的时候将数据带过去，进行回显；可能是父组件调用子组件的时候，仅加载了子组件的内容，而父组件的内容是动态从后台获取的，所以在页面刷新的时候，路由已经不是原来父级路由了，并不能保证从后台获取父级数据，所以考虑使用子父页面传值的方式进行父级页面回显，有兴趣的小伙伴可以考虑使用子页面刷新后回调父页面方法经行重新拉取数据

具体步骤：

一：路由配置

1、在vue 中router文件夹的index.js 路由文件中，配置好具体的路由

2、页面中使用路由跳转，<router-view></router-view>

说明：

    rwInfo 为自定义传值参数对象，可获得子页面传输的值

    getChData($event) 为父页面接收函数，用于接收子页面传过来的值

父页面路由跳转方式

方式一：query 跳转
this.$router.push({path: "你的路由地址" , query : queryData })

方式二：params 跳转
this.$router.push({name: "你的路由地址" , params: 你的参数值})

在父页面通过上述方式跳转到子页面后可以，通过 this.$route.query.你的参数值  直接获取数据

this.$route.query.你的参数值

父级使用子页面值方式：

3、子页面传参给父页面（我是原路返回，所以之际使用query的，具体需要传给父页面啥值，还是需要手动定义的）

//子父传值，保证刷新后父级有数据
this.$emit("rwInfo", this.$route.query)

重要说明：

在上述中不管是query 或者是  params 路由跳转的，在传递参数是可能需要进行转义一下,不然会出现Object错误

如：父传子，进行 JSON.stringify(this.rwInfo) 编译，子页面接收的时候再进行反义JSON.parse(val.rwInfo)