vue中更新两个不相关组件的方法

第一步：建立EventBus文件

在src下建立utils文件夹，utils文件夹下创立EventBus.js

 import Vue from 'vue';
 /**
  * 事件总线
  * @usage:
  * EventBus.$emit('event',payload);
  * EventBus.$on('on',(payload)=>{});
  */
 const EventBus = new Vue();
 export default EventBus

第二步：A文件（两个页面都要引用EventBus文件）：

<template>
    <div>
        <div class="button" @click="toBpage">点击向B页面传递参数</div>
    </div>
</template>
<script>
    import Bus from "@/utils/EventBus";
    export default {
      data() {
        return {
          id:'12345' //a向b传递的参数
        }
      },
      methods:{
          toBpage(){
            // getId 是自己命名的b页面也通过同一个名字接受参数，this.id 是参数
             Bus.$emit("getId", this.id);
        }
      }
     }
</script>

第三步：B文件（两个页面都要引用EventBus文件）：

<script>
    import EventBus from "@/utils/EventBus";
    export default {
      data() {
        return {
          aId:'' 
        }
      },
      mounted(){
      // 获取a传过来的id
          EventBus.$on("getId", (id) => {
          //a传来的参数
          console.log(id,'----id')
          this.aId = id  //可以赋值
          this.getList(id) // 可以做其他操作
        });
      }
      methods:{
          getList(id){
            // 获取数据
        }
      }
     }
</script>

vue利用key重新渲染组件

<v-card :key="reload">
    {{this.message}}
    <v-btn @click='Rerender'>change</v-btn>
</v-card>

 

export default {
  data() {
    return {
      reload: 0,
      message: '旧消息'
    };
  },
  methods: {
    Rerender() {
      this.message = '新消息'
      this.reload += 1;  
    }
  }
}