Vue.js：如何避免跨组件使用计算属性时代码重复

嘿，这个问题我太熟了——在多个组件里重复写相同的计算属性确实很烦人，不仅维护起来麻烦，还容易不小心写出不一致的逻辑。下面给你几个实用的方案，按需选就行：

这是Vue2时代就常用的复用方式，把通用的计算属性打包成一个混入对象，然后在需要的组件里引入就行。

步骤很简单：

1. 新建一个混入文件，比如src/mixins/parentRouteMixin.js：

export default {
  computed: {
    parentRouteName() {
      // 你的父路由名称获取逻辑，比如：
      return this.$route.matched.length > 1 ? this.$route.matched[0].name : null;
    }
  }
}

2. 在组件里导入并使用：

<script>
import parentRouteMixin from '@/mixins/parentRouteMixin';

export default {
  mixins: [parentRouteMixin],
  // 其他组件逻辑
}
</script>

之后你就能在组件的模板或脚本里直接用parentRouteName了。

⚠️ 小提醒：混入的属性会和组件自身的属性合并，如果组件里有同名的计算属性，组件自己的会覆盖混入的，所以命名要注意避免冲突。

如果你的项目用的是Vue3的Composition API，或者Vue2安装了@vue/composition-api，那组合式函数是更优雅的选择——它比混入更灵活，也不会有命名冲突的隐患。

1. 新建一个组合式函数文件，比如src/composables/useParentRoute.js：

import { computed } from 'vue';
import { useRoute } from 'vue-router';

export function useParentRouteName() {
  const route = useRoute();
  const parentRouteName = computed(() => {
    // 同样的父路由名称逻辑
    return route.matched.length > 1 ? route.matched[0].name : null;
  });

  return { parentRouteName };
}

2. 在组件里调用这个函数：

<script setup>
import { useParentRouteName } from '@/composables/useParentRoute';

const { parentRouteName } = useParentRouteName();
</script>

<template>
  <div>父路由名称：{{ parentRouteName }}</div>
</template>

这种方式的好处是，你可以清晰地看到组件里用到了哪些复用的属性，而且函数还能扩展参数，比如允许自定义取哪一层路由，灵活性拉满。

如果这个计算属性真的是所有组件都可能用到，也可以把它挂载到Vue的全局属性上，但要注意保持响应式：

1. 在main.js里配置：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

// 把获取父路由名称的逻辑封装成一个函数，然后挂载到全局
app.config.globalProperties.$getParentRouteName = function() {
  return this.$route.matched.length > 1 ? this.$route.matched[0].name : null;
};

app.use(router).mount('#app');

2. 在组件里用计算属性包装一下，保证响应式：

<script setup>
import { computed, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();
const parentRouteName = computed(() => proxy.$getParentRouteName());
</script>

不过这种方式我一般不太推荐，因为全局属性容易造成命名污染，而且逻辑分散在main.js里，不如前两种方案模块化，适合非常简单且全局通用的场景。

总结一下：Vue3优先用组合式函数，选项式API用混入，全局挂载只作为兜底选项。

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