0

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

在Tset组件中用到了停止这个方法
image.png
LogDetail和Monitoring中也用到了了这个方法

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

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

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

Apple 35
12月4日提问
3 个回答
0

已采纳

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

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

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

<script>
import common from xxx

export default {
  mixins: [common]
}


</script>
0

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

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

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

撰写答案

推广链接