时间戳

首页 > 解决方案 > Vuejs如何在单个组件中使用重复方法

vue.js - Vuejs如何在单个组件中使用重复方法

问题描述

我如何在不同的组件中使用相同的方法而不为到达组件重写相同的方法。我查看了 mixins，但文档说“谨慎使用全局 mixins”。所以我想知道这种方法是否有更理想的方法。与全局计算相同。

<template>
    <div class="wrapper">
    ...
    <a href="#" @click.prevent="goToPage('page')">Link on many templates</a>
    ...
    </div>
</template>

<script>
export default {
   data() {
     return {}
   },
   methods: {
     goToPage(page) {
        return this.$store.commit('page/push', {page:page});
     }
   }
}
</script>

谢谢

标签： vue.jsvuex

解决方案

全局混合不是唯一的混合类型。见https://vuejs.org/v2/guide/mixins.html

如果您想为每个组件添加方法或计算属性，那么您将使用全局 mixin。这将影响所有组件，包括来自第三方库的组件。选择名称时需要小心，以确保不会与其他任何内容发生冲突。使用全局 mixin 也会带来很小的性能开销。例如，Vuex 使用全局 mixin 来确保该$store属性存在于所有组件上。

如果您只需要将方法/属性添加到几个组件，那么使用普通的 mixin 会更好。通常，它会有自己的文件，看起来像这样：

// my-mixin.js
export default {
  methods: {
    goToPage(page) {
      return this.$store.commit('page/push', {page:page});
    }
  }
}

然后在您的.vue文件中：

<script>
import myMixin from 'my-mixin'

export default {
  mixins: [myMixin],
  // ... all the other options
}
</script>

鉴于问题中的示例似乎是导航链接，使用 mixin 的替代方法可能是引入合适的组件来处理这些链接。您只需使用链接组件，而不是在组件之间共享代码。这将取决于该方法是否具有超出这些链接的用途。

还有其他选择，例如使用 跨组件在全球范围内共享事物Vue.prototype，但是对于问题中给出的示例似乎不太合适。

我还要注意 Vue 3 通过组合 API 引入了一些新的 mixins 替代方案。但是，使用组合实际上会改善您的特定用例并不是很明显。Vue 3 也仍处于测试阶段。

推荐阅读