Vue2 - 公共/私有方法实现在 mixin 中是什么样子？

Question

我看到以下内容已记录在案，但是我无法想象如何实现这一点。

// Even better!
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin

我遇到的问题是，在包含多个mixin的组件中，我们如何管理它们，这里的最佳实践/约定是什么？

我明白这将如何解决我提到的问题。

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

但是，正如问题所述，我试图了解如何在组件中实现“更好”的方法。

我的疯狂想法，不确定这是否有效/有意义？

// myMixin
const method1 = () => console.log('method1 firing')

export default {
  methods: {
    $_myMixin() {
      return {
        method1 
      }
    }
  }
}


// component
mixins: [myMixin],

data: () => ({
  myMixinMethods: {}
}),
created() {
  this.myMixinMethods = this.$_myMixin()
},
mounted() {
  this.myMixinMethods.method1()
}

感觉很复杂，所以我出去寻找更多答案，发现有一种“更好”的方法，也许是公共/私有方法，但不幸的是，我不太明白这是如何实现的，如果它可以通过 vue 组件中的多个 mixin 解决我的命名空间问题。

在 Vue 2 中，没有“私有”方法的内置概念，但您可以通过在组件或 mixin 对象外部定义函数来模仿这种行为，就像您提供的示例一样。这些函数将无法从其他组件或 mixin 访问，从而有效地使它们成为“私有”。

Answer 1

所以，像这样定义 mixin：

function privateMethod() {
  console.log('Private method firing');
}

export default {
  methods: {
    publicMethod() {
      console.log('Public method firing');
      privateMethod();
    }
  }
}

在组件上：

import myMixin from './myMixin';

export default {
  mixins: [myMixin],
  mounted() {
    this.publicMethod(); // This will call both the public and private methods
  }
}

所以，你可以模仿这样的行为。

希望这有帮助！