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

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

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

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

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

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

阅读 324
评论
    3 个回答
    • 7k

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

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

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

    <script>
    import common from xxx
    
    export default {
      mixins: [common]
    }
    
    
    </script>
      • 506

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

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

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

          登录后参与交流、获取后续更新提醒