Question

当在多个组件中使用类似计算属性的东西时，如何避免代码重复？

一个例子是我有一个计算属性来获取父路由名称 - 它非常简单：

computed: {
  parent_route () {
    return this.$route.matched[0].name
  }
}

我发现我在多个组件中使用此计算属性。我怎么能把它存放在我所有组件都可以使用的地方？

Answer 1

您可以使用Mixins。对于最常见的情况，Global Mixin（谨慎使用）：

Vue.mixin({
    computed: {
      parent_route () {
        return this.$route.matched[0].name
      }
    }
})

this.parent_route计算属性现在在所有组件中自动定义。

但你应该避免滥用全球混合。相反，您可以使用Option Merging（mixins选项）在本地应用它们：

var mixin = {
    computed: {
      parent_route () {
        return this.$route.matched[0].name
      }
    }
};

new Vue({
  mixins: [mixin],
  data: function () {},
  created: function () {
    console.log(this.parent_route) // should be ok
  }
})

Answer 2

你可以使用mixins。使用以下命令创建myMixin.js文件：

export const myMixin = {
 computed: {
  parent_route () {
    return this.$route.matched[0].name
  }
 }
}

然后你可以在你的vue组件中导入它，如下所示：

从＆＃39; ../ myMixin.js＆＃39;导入{myMixin} //这里的myMixin.js文件的有效路径

并注册：

...
data {...},
mixins: [myMixin],
methods: {...}
...

关于mixins的更多信息： https://vuejs.org/v2/guide/mixins.html

Vue.js - 如何避免代码重复

2 个答案: