一,页面跳转的效果
1,通过v-if或者v-show
![](https://i-blog.csdnimg.cn/blog_migrate/2cb5dbed6e29726f69ba9f1f3be9c8b7.jpeg)
当默认dialog1:false,组件是隐藏的,通过接受组件selectdetail里的事件![](https://i-blog.csdnimg.cn/blog_migrate/5df67fc469a6985304a8bf4afb4db6cb.jpeg)
触发事件showdevice带入形参{cateid:3,data:resp.body.data}, 以及事件listenOpenChild
改变dialog1的值
隐藏组件。
2,通过路由跳转
通过事件触发路由
二,组件之间传值的方法。
1,子父组件
在子组件内定义props
在父组件内传值
2,跳转组件之间的传值。
组件A跳转到B
组件A发出
![](https://i-blog.csdnimg.cn/blog_migrate/e61cbc88ef71184f1364049defecd829.jpeg)
组件B 接收
![](https://i-blog.csdnimg.cn/blog_migrate/0cdc23f2766a27a95c567a6b801b47ed.jpeg)
三,在滚轮刷新加载信息的时候,如何让刷新的内容显示在当前页面。
因为从后台接收的数据都是由数组容器接收,因此可以在导入数组的时候有2中方式。
1,用你concat连接2个数组
![](https://i-blog.csdnimg.cn/blog_migrate/480ebcf7e69c9800f1339fd007805372.jpeg)
以上示例,this.dataList是组件内的容器,contain是接收到的,将接收到的contain拼接在之后,并重新赋值给this.dataList
,页面通过v-for(item of dataList)渲染,如果想将接收到的数据显示在最前面,可以这样
this.dataList=contain.concat(this.dataList)
2,第二种方法就是用push,原理类似。
四,v-for渲染出来的列表,想要跳转到遍历元素(item)相关的界面,可以添加event(事件),将item的属性作为形参带入event函数,通过函数,重新拼参数进行跳转。
1,通过v-if或者v-show
![](https://i-blog.csdnimg.cn/blog_migrate/2cb5dbed6e29726f69ba9f1f3be9c8b7.jpeg)
当默认dialog1:false,组件是隐藏的,通过接受组件selectdetail里的事件
![](https://i-blog.csdnimg.cn/blog_migrate/5df67fc469a6985304a8bf4afb4db6cb.jpeg)
触发事件showdevice带入形参{cateid:3,data:resp.body.data}, 以及事件listenOpenChild
![](https://i-blog.csdnimg.cn/blog_migrate/ee2c39e92cc36ecc935929c7c458c618.jpeg)
改变dialog1的值
![](https://i-blog.csdnimg.cn/blog_migrate/91304030e9e7352fa45dd224f7e78a2b.jpeg)
2,通过路由跳转
通过事件触发路由
![](https://i-blog.csdnimg.cn/blog_migrate/46a5e13d72530864cdf998314d221008.jpeg)
二,组件之间传值的方法。
1,子父组件
在子组件内定义props
![](https://i-blog.csdnimg.cn/blog_migrate/5fcfa2f9a62a282a61c62e68af245253.jpeg)
在父组件内传值
![](https://i-blog.csdnimg.cn/blog_migrate/778a50c5a1ee0c9b0992467b15b07fde.jpeg)
2,跳转组件之间的传值。
组件A跳转到B
组件A发出
![](https://i-blog.csdnimg.cn/blog_migrate/e61cbc88ef71184f1364049defecd829.jpeg)
组件B 接收
![](https://i-blog.csdnimg.cn/blog_migrate/0cdc23f2766a27a95c567a6b801b47ed.jpeg)
三,在滚轮刷新加载信息的时候,如何让刷新的内容显示在当前页面。
因为从后台接收的数据都是由数组容器接收,因此可以在导入数组的时候有2中方式。
1,用你concat连接2个数组
![](https://i-blog.csdnimg.cn/blog_migrate/480ebcf7e69c9800f1339fd007805372.jpeg)
以上示例,this.dataList是组件内的容器,contain是接收到的,将接收到的contain拼接在之后,并重新赋值给this.dataList
,页面通过v-for(item of dataList)渲染,如果想将接收到的数据显示在最前面,可以这样
this.dataList=contain.concat(this.dataList)
2,第二种方法就是用push,原理类似。
四,v-for渲染出来的列表,想要跳转到遍历元素(item)相关的界面,可以添加event(事件),将item的属性作为形参带入event函数,通过函数,重新拼参数进行跳转。