vue页面传值

时间:2023-03-08 23:15:36
vue页面传值
第一种情况:例:消息列表页(路由)跳转:
methods: {
  goTo(){
    this.$router.push({
      name:'/My/Info',
      query:{
        'tellSeq':this.tableData[index].TellSeq,    //跳路由
        'menu':JSON.stringify(this.menuList),     //传值,必须用stringify,否则,跳转页面刷新,数据会消失
      }
    });
  },
}
消息详情页收值:
let menuToken = JSON.parse(this.$route.query.menu);
第二种情况:例:用户登录(路由)跳转首页
window.sessionStorage.setItem('userInfo', JSON.stringify(res.data));          //登录接口发通后,存储用户信息到本地缓存;
created() {
let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));      //

登录后,在首页获取用户登录信息:

}
第三种情况:子组件和父组件之间传值,参考:
     父组件页面,在子组件标签上用v-bind:sendVal="sendVal",子组件在data中用props:['sendVal']接收
     https://www.cnblogs.com/linxin/p/7144123.html
第四种情况:兄弟组件之间传值:
     可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。
    参考:https://www.cnblogs.com/place-J-P/p/7586819.html
              https://www.jianshu.com/p/69d53063be7c