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 的回答解决我的问题的解释：

标签： javascriptvue.js

Answer 1

组合 mixin 和组件选项时：

当 mixin 和组件本身包含重叠选项时，它们将使用适当的策略“合并”：

• 数据对象进行递归合并，在发生冲突时组件的数据优先。

• 将同名的钩子函数合并到一个数组中，这样所有的钩子函数都会被调用。Mixin 钩子会在组件自己的钩子之前被调用。

• 方法、组件和指令将合并到同一个对象中。当这些对象中存在冲突的键时，组件的选项将优先。

下面是一个由组件和 mixin 提供的方法的示例：

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"

这是codesandbox中的一个例子

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