1

过去我很难弄清楚使用多个 mixin 在组件上定义方法、计算值等的位置。有没有标准的做法解决这个问题？

我可以这样做：

// someMixin.js

export default {
  methods: {
    someMixin__someMethod () {
      /* do something */
    }
  }
}

// someComponent.js

import someMixin from'someMixin'

export default {
  name: 'someComponent',
  mixins: [ someMixin ],
  methods: {
    someMethod () {
      this.someMixin__someMethod()
    }
  }
}

但这不是很传统，可能会让其他开发人员感到困惑

4

4 回答 4

3

来自 vuejs 的推荐命名约定

$_myMixinName

Vue 使用_前缀来定义自己的私有属性，因此使用相同的前缀（例如_update）可能会覆盖实例属性。即使您检查并且 Vue 当前没有使用特定的属性名称，也不能保证在以后的版本中不会出现冲突。

至于$前缀，它在 Vue 生态系统中的用途是向用户公开的特殊实例属性，因此将其用于私有属性是不合适的。

相反，我们建议将两个前缀组合成$_，作为用户定义的私有属性的约定，以保证与 Vue 没有冲突。

https://vuejs.org/v2/style-guide/#Private-property-names-essential

于 2019-09-23T07:44:35.917 回答
0

哦好吧...

我正在这样做：

剪辑框架.js：

const clipFrame = {

    methods:
    {
        clip(frame){

            return ''

        }

    }

}

export default clipFrame

主.vue：

import clipFrame from '../mixins/clipframe.js'

export default {
    name: 'ManageActions',

    mounted() {
    },

    computed: {
    },

    mixins: [
        clipFrame
    ],

    methods:
    {
        // clip(frame){ in mixin },
    }
}

它不是一个类，也不是一个定义......所以我真的不知道它应该是pascalCase，fullcaps还是snake，或者什么......

但我没有将它绑定到本地方法。该方法按原样混合，并且可以按 mixin 中定义的名称使用。

当我将方法绑定到本地方法时，我使用普通类。像
import Bla from '../classes/Bla.js'
method: doit(x) { return Bla.method(x)
}

于 2021-04-07T21:19:00.687 回答
0

当我构建我的 Vue 应用程序时，我更喜欢非常清楚功能的来源，所以我加倍努力并在我的 mixin 函数前加上“mixin_”。这是一个片段...

/**
 * INTERVALOMETER!
 *
 * In some components and pages that get mounted we should check to make sure we are clearing
 * any existing intervals created by setInterval() so we don't get repetitive tasks running
 * away from us. Since this is common, I created this mixin to reuse in different places
 * throughout the system.
 */
export default {
methods: {
    mixin_startIntervalometer(intervalDataKey, fn, ms) {
        clearInterval(this[intervalDataKey])
        this[intervalDataKey] = setInterval(fn, ms)
    }
}
}
于 2020-09-10T17:41:25.477 回答
0

AFAIK 没有约定，这就是为什么还有其他的 mixins 解决方案。使用 mixins 的缺点是封装的逻辑或数据被隐藏，您可能会遇到名称冲突以及难以理解行为的来源。
也许值得一试的是新的 vue 功能 api，它完成了同样的事情，减去了这些问题，你可以将它用作插件，直到 vue-3 出现。
如果您被锁定在 mixin 中，那么只需开发自己的约定以及可以放入 mixin 中的内容，以免组件和 mixin 之间发生冲突。

于 2019-09-03T08:36:05.777 回答