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

问：

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

// 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()
}

这感觉很复杂，所以我出去寻找更多的答案，发现有一种更好的方法，也许是 pubic/private 方法，但不幸的是，我不太明白它是如何实现的，以及它是否可以解决我在 vue 组件中使用多个 mixin 的命名空间问题。

JavaScript vue.js vuejs2 命名空间混合

这个问题是基于意见的。“更好” - 为了什么更好？它是这样工作的。“当然这是否可行/有意义” - IMO，不。请注意，这些函数不使用，也不能从成为 mixin 的一部分中受益。关于名称冲突，您通常描述一般的 mixin 模式问题。this

1赞 cantdocpp 9/23/2023

Vue 3 不再推荐 mixin。我建议你改用可组合函数

0赞 0x5929 9/24/2023

@EstusFlask 我明白你在说什么。是的，所以我的问题更多的是关于“更好”的方法如何帮助消除名称冲突问题。但正如你所说，这确实是 mixin 模式的一个缺陷。您是说命名方法的方法是否合适，或者这里的约定是什么$_myMixin_methodName

0赞 0x5929 9/24/2023

@cantdocpp 很遗憾，升级到 Vue3 不是这个 atm 的一个选项：/

1赞 Estus Flask 9/24/2023

这是可以接受的，但我认为没有多大必要。由于您应该可以完全控制自己的混音，因此通常不会发生太多冲突。你可以在 Vue 2 中使用组合 api，并以某种方式将其与选项组合。而且你根本不需要将 mixin 用于不在当前组件实例上运行的东西，这段代码可以提取到常规的 JS 模块中。如上所述，这是设计问题。this

答：

1赞 Ali Bahrami 9/23/2023 #1

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

你提到的“更好”的方法涉及在 mixin 对象之外定义一个私有函数。此函数只能在同一文件/模块中访问，并且在将 mixin 导入到组件中时不会公开。下面是如何使用此方法的示例：

所以，像这样定义 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
  }
}

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

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

Vue2 - What does a public/private method implementation look like in mixins?

评论

评论