vue 方法在不同组件中的复用

Question

有这样的三个组件,既不是父子组件也不是兄弟组件,但是他们三个组件都用到了一些公共的方法:

在Tset组件中用到了停止这个方法

LogDetail和Monitoring中也用到了了这个方法

然而目前的形式是同样一份代码 我已经在不同的组件中copy可三份

代码可读性差,难以维护且臃肿万分

请问如何将其抽取,加以复用?

Answer 1

• 看了你的截图，不是有一个mixins文件夹吗？可以把公共函数放在mixins里面。
• 面向对象语言可以用父类/接口来实现代码复用，但JS不是面向对象语言（而是基于原型语言），在JS中是使用mixin实现代码复用的。
• minix（混入）是JS的一种设计模式，不仅可以用在Vue，原生JS开发也能用。Vue官方文档也介绍了如何在Vue项目中使用mixin。
• 如果你要学习的话，可以先学习原生JS中使用混入，然后再学Vue中怎么使用混入。

Answer 2

方案1： 写一个公共方法，3个组件都去调用即可

方案2： 写一个公共类Base，3个组件继承Base， 将公共方法写到Base中

Answer 3

Vue本身有解决方案：混入mixins
只需要一个js或者vue文件导出包含这个方法的对象

export default {
  methods: {
    commonFunc () {
      // xxx
    }
  }
}

Vue文件引入并通过mixins混入,之后就可以和正常method一样使用。

<script>
import common from xxx

export default {
  mixins: [common]
}


</script>