Vue 组件间数据传递：点击按钮跳转页面并传递数据

要实现点击'修改明细'按钮后跳转到 mzHj 的 mzCfhj 分页，并将 CflistManage 内选中的数据传输给 mzCfhj，可以按照以下步骤进行操作：

在 mzHj 组件中定义一个数据属性 selectedData，用于存储 CflistManage 组件选中的数据。
在 CflistManage 组件中，在点击'修改明细'按钮时，触发 btnChangeDetail 方法，并将选中的数据赋值给 mzHj 组件的 selectedData 属性。
在 mzHj 组件的 onTabChange 方法中，判断如果 activeKey 为'2'，则将 selectedData 传递给 mzCfhj 组件。
在 mzCfhj 组件中，接收 selectedData 作为 props 属性，用于显示传递的数据。

下面是具体代码示例：

在 mzHj 组件中：

<template>
  <a-card :bordered='false' style='height: 100%' :tab-list='tabList' :active-tab-key='activeKey' @tabChange='onTabChange'>
    <p v-if='activeKey === '1''>
      <mzCfhj />
    </p>
    <p v-else-if='activeKey === '2''>
      <CflistManage @changeDetail='handleDetailChange' />
    </p>
  </a-card>
</template>

<script>
import mzCfhj from './mzCfhj.vue'
import CflistManage from './CflistManage.vue'

export default {
  components: {
    mzCfhj,
    CflistManage
  },
  data() {
    return {
      tabList: [],
      activeKey: '1',
      selectedData: null
    }
  },
  methods: {
    onTabChange(key) {
      this.activeKey = key;
    },
    handleDetailChange(data) {
      this.selectedData = data;
      this.activeKey = '1';
    }
  }
}
</script>

在 CflistManage 组件中：

<template>
  <div>
    <a-button type='primary' @click='btnChangeDetail'>修改明细</a-button>
  </div>
</template>

<script>
export default {
  methods: {
    btnChangeDetail() {
      // 获取选中的数据
      const selectedData = this.getSelectedData();
      
      // 触发 changeDetail 事件，将数据传递给父组件
      this.$emit('changeDetail', selectedData);
    },
    getSelectedData() {
      // 获取选中的数据的逻辑
      // ...
      return selectedData;
    }
  }
}
</script>

在 mzCfhj 组件中：

<template>
  <div>
    <!-- 显示传递的数据 -->
    <p>{{ selectedData }}</p>
  </div>
</template>

<script>
export default {
  props: ['selectedData']
}
</script>

这样，当点击'修改明细'按钮时，会将选中的数据传递给 mzHj 组件，并跳转到 mzHj 的 mzCfhj 分页。在 mzCfhj 组件中，可以通过 props 属性接收 selectedData，并进行相应的处理。