Vue의 연결 유지 구성 요소가 페이지 간 데이터 전송을 구현하는 방법

<template>
  <keep-alive>
    <component :is="component"></component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      component: 'ComponentA',
    };
  },
};
</script>

<template>
  <div>
    <keep-alive>
      <component :is="component" ref="dynamicComponent"></component>
    </keep-alive>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      component: 'ComponentA',
    };
  },
  methods: {
    changeComponent() {
      if (this.component === 'ComponentA') {
        this.component = 'ComponentB';
      } else {
        this.component = 'ComponentA';
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.dynamicComponent.$on('update', (data) => {
        console.log('接收到数据:', data);
      });
    });
  },
};
</script>