Vue中如何将计算属性结果传递至另一个组件

针对你的需求，无需迁移HomeView中的数据和方法，以下两种方案可实现将totalPrice传递到AboutView：

方案一：路由传参（一次性传递，适合简单场景） #

通过路由query参数传递totalPrice，AboutView从路由中读取参数展示，实现成本低，无需额外依赖。

修改HomeView.vue #

更新router-link，添加query参数传递计算属性值：

<!--HomeView.vue-->
<template>
    <router-link :to="{ path: '/about', query: { totalPrice: totalPrice } }">
        <button class="total">
            <TotalPriceChild :propTotalPrice="totalPrice" />
        </button> 
    </router-link> 
</template>

<!-- 其余script部分保持不变 -->

修改AboutView.vue #

在组件中通过$route.query获取参数并展示：

<!--AboutView.vue-->
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p> Total price is : {{ displayTotalPrice }}</p>
  </div>
</template>

<script>
export default {
    name: 'AboutView',
    computed: {
        displayTotalPrice() {
            // 将路由参数转为数字，避免字符串展示异常
            return Number(this.$route.query.totalPrice) || 0;
        }
    }
}
</script>

方案二：状态管理（Pinia/Vuex，适合多组件共享状态） #

如果后续有更多组件需要访问quantities、prices或totalPrice，推荐使用状态管理工具。既不用拆分HomeView的原有逻辑，又能实现多组件实时共享数据。

针对Vue3项目（使用Pinia） #

1. 创建Pinia Store
   新建stores/cart.js：

import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({
    quantities: {
      item1: 0,
      item2: 0,
    },
    prices: {
      item1: 10,
      item2: 10,
    }
  }),
  getters: {
    totalPrice() {
      return (this.quantities.item1 * this.prices.item1) + (this.quantities.item2 * this.prices.item2);
    }
  },
  actions: {
    // 可将HomeView中依赖quantities的方法迁移至此，保持逻辑集中
    updateItemQuantity(itemName, newValue) {
      this.quantities[itemName] = newValue;
    }
  }
});

2. 修改HomeView.vue
   引入Store，替换原有data和computed：

<!--HomeView.vue-->
<template>
    <router-link to="/about">
        <button class="total">
            <TotalPriceChild :propTotalPrice="cartStore.totalPrice" />
        </button> 
    </router-link>
    <!-- 示例：调用Store的action修改数量 -->
    <button @click="cartStore.updateItemQuantity('item1', cartStore.quantities.item1 + 1)">增加item1数量</button>
</template>

<script>
import TotalPriceChild from '@/components/TotalPriceChild.vue';
import { useCartStore } from '@/stores/cart';

export default {
    name: 'HomeView',
    components: {
        TotalPriceChild,
    },
    setup() {
        const cartStore = useCartStore();
        return { cartStore };
    }
}
</script>

3. 修改AboutView.vue
   引入Store直接获取totalPrice：

<!--AboutView.vue-->
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p> Total price is : {{ cartStore.totalPrice }}</p>
  </div>
</template>

<script>
import { useCartStore } from '@/stores/cart';

export default {
    name: 'AboutView',
    setup() {
        const cartStore = useCartStore();
        return { cartStore };
    }
}
</script>

针对Vue2项目（使用Vuex） #

1. 创建Vuex Store
   新建store/index.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    quantities: {
      item1: 0,
      item2: 0,
    },
    prices: {
      item1: 10,
      item2: 10,
    }
  },
  getters: {
    totalPrice: state => {
      return (state.quantities.item1 * state.prices.item1) + (state.quantities.item2 * state.prices.item2);
    }
  },
  mutations: {
    UPDATE_QUANTITY(state, { item, value }) {
      state.quantities[item] = value;
    }
  },
  actions: {
    updateQuantity({ commit }, payload) {
      commit('UPDATE_QUANTITY', payload);
    }
  }
});

2. 修改HomeView.vue

<!--HomeView.vue-->
<template>
    <router-link to="/about">
        <button class="total">
            <TotalPriceChild :propTotalPrice="$store.getters.totalPrice" />
        </button> 
    </router-link>
    <button @click="updateQuantity('item1', $store.state.quantities.item1 + 1)">增加item1数量</button>
</template>

<script>
import TotalPriceChild from '@/components/TotalPriceChild.vue';
import { mapGetters, mapActions } from 'vuex';

export default {
    name: 'HomeView',
    components: {
        TotalPriceChild,
    },
    computed: {
        ...mapGetters(['totalPrice'])
    },
    methods: {
        ...mapActions(['updateQuantity'])
        // 原依赖quantities的方法可直接通过this.$store.state访问数据，无需修改逻辑
    }
}
</script>

3. 修改AboutView.vue

<!--AboutView.vue-->
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p> Total price is : {{ totalPrice }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name: 'AboutView',
    computed: {
        ...mapGetters(['totalPrice'])
    }
}
</script>

方案对比 #

• 路由传参：实现简单，适合一次性传递数据；但刷新页面后参数会保留在URL中，敏感/复杂数据不推荐使用。
• 状态管理：适合长期共享响应式状态，多组件可实时获取最新值；HomeView的业务逻辑可集中到Store中，避免代码分散，不会增加复杂度。

内容的提问来源于stack exchange，提问作者Greg Tom