使用router-view时组件之间的传值【Vue】_vue3 router-view传值

1.子组件给父组件传值

-------------------父组件：-----------------
  
<router-view @getShopCode='getShopCode'></router-view>

methods:{
   getShopCode(value){
      conso.log(value);
    }
  }

-------------------子组件：-----------------
 
methods:{
     goShopList(value){
       this.$emit('getShopCode',value)
       this.$router.push({name:'shopList'});
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.子组件监听父组件下发的值

2.父组件发生变化导致子组件变化

  父组件：
    //inputValue为传递给子组件的值
   <router-view :inputValue='inputValue'></router-view>

 子组件：

  watch:{
    inputValue:function(value){
       console.log(value)
     }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13