vue2项目中跨组件传值会不方便，这里使用Vuex来获取更新特定的值。

首先安装依赖

pnpm i vuex

项目目录创建store文件夹并创建index.js

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import casePortrait from './modules/casePortrait'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true, // process.env.NODE_ENV !== 'development',
  modules: {
    casePortrait
  },
  mutations: {}
})

export default store

创建子文件

src/store/modules/casePortrait.js

为了方便管理，我们再创建一个模块用来存放指定的数据

const state = {
    caseTypeNum: 0,
    caseTypeID: 0,
    bmID: 0,
}
//获取数据
const getters = {
    getCaseTypeNum: state => state.caseTypeNum,
    getCaseTypeID: state => state.caseTypeID,
    getbmID: state => state.bmID,
}
//更新数据
const mutations = {
    updateCaseTypeNum: (state, newNum) => {
        state.caseTypeNum = newNum;
    },
    updateCaseTypeID: (state, newID) => {
        state.caseTypeID = newID;
        state.bmID = '';
    },
    updateBmID: (state, newID) => {
        state.caseTypeID = '';
        state.bmID = newID;
    }
}

export default {
    namespaced: true,
    state,
    getters,
    mutations
}

main.js文件内引入store

import store from './store'
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

组件内读取值

在组件内，先引入vuex方法,然后使用computed来获取值

import {mapGetters, mapMutations} from "vuex";

computed: {
...mapGetters('casePortrait', ['getCaseTypeID'])
},

html代码中渲染

<div>{{getCaseTypeID}}</div>

组件内更新值

在casePortrait文件中，我们定义了updateCaseTypeID方法，用下面的方式引入方法

methods: {
    ...mapMutations('casePortrait', ['updateCaseTypeID'])
  },

html代码中触发方法

<div class="listItem" :class="{active:getCaseTypeID==item.id}" @click="updateCaseTypeID(item.id)"
         v-for="(item,index) in list" :key="index"></div>