1、页面之间的传参
可以利用本地存储localStorage,将需要传过去参数在本地存储中进行保存,
localStorage.setItem("参数名",参数值)
然后再到另外一个页面中获取。
localStorage.getItem("参数名")
所有页面之间使用。
注意:如果页面之间是用v-if的形式切换的话,每次切换的时候都会重新加载数据,重新渲染页面,所以为了不频繁操作数据,可以判断本地存储中是否存在,存在则不需要重新获取了。
路由之间页面跳转
1、标签跳转及传参(router-link)
2、js控制跳转路由及传参
3、(this.$router.push)路由组件传参
2、父子之间的传参
父=>子
父组件:v-bind绑定属性
//propsVal 为自定义属性名
//msg为父组件的内容,传过去的参数
子组件:prop:["propsVal"] ,接收属性,在子组件中可以直接使用该属性名
父获取子组件的信息,还可以通过ref的形式
子=>父
子组件:v-on绑定事件
传给父
fun(){
this.$emit("Pfun”,"data")
}
//Pfun为自定义的事件名称
//data为传过去的参数
父组件:
//Pfun为子组件自定义的事件名
//childFun为父组件的方法
childFun(res){
//res为子传过来的参数
}
3、兄弟之间的传参
使用中央事件总线、发布订阅模式EventBus的形式传参
第一个页面发送:
传给消息给第二个页面
sendMsg(){
this.$emit("事件名xx","参数data")
}
第二个页面接收:
mounted(){
this.$on("事件名xx",(参数data)=>{
this.msg = data
})
接收时,需要在mounted中,监听事件名xx,并吧传递过来的时间通过$on监听回调函数
总是被问到,总是回答的也是很粗略,好好整理,好好总结,相信可以做到的。
谢谢广大网友!!!