javascript - 重写 Vue 的 mixin 方法

Question

有没有办法覆盖一些本地组件在组件内部调用的 npm 的 mixin？

我里面有一个 npm 包组件 node_modules/somePackageName/components/footer.vue 它使用另一个来自 node_modules/somePackageName/mixins/popup.js

popup.js 包含以下方法:

methods: {
  setPopupActiveStatus (val, blur = true) {
    const isVisible = false
  }
},

我想覆盖 App.vue 的行为，我在其中使用 footer.vue 组件，如下所示:

methods: {
  setPopupActiveStatus (val, blur = true) {
    const isVisible = true
  }
},

但它并没有像我想要的那样工作。

====更新====

这是我如何根据@Estradiaz 的回答解决我的问题的解释:

Answer 1

当 combining mixin & component options :

When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies:

• Data objects undergo a recursive merge, with the component’s data taking priority in cases of conflicts.

• Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called before the component’s own hooks.

• Methods, Components and Directives will be merged into the same object. The component’s options will take priority when there are conflicting keys in these objects.

这是一个由组件和混合提供的方法的例子:

var mixin = {
  methods: {
    foo: function () {
      console.log('Mixin Msg')
    },
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    foo: function () {
      console.log('Component Msg')
    },
  }
})

vm.foo() // => "Component Msg"

这是一个 example in codesandbox

所以我相信你应该能够简单地通过在组件上提供一个具有相同名称的方法来“覆盖”mixin，它会优先