Override Vue's mixin method

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:

当 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"

这是example in codesandbox

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

Answer 2

Vue 扩展的地方

所以基本上你想要做的是通过自定义方法扩展你当前的组件。 这可以通过Vue.extend 完成。 Vue 通过将一个组件分配给extends 选项，提供了一个无忧克隆/扩展组件的选项：

Option/ Composition - extends

import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
export default {
   name: "override",
   extends: SourceComponent,
   methods: {
      thatActualMethodBehaviour(){}
   }
} 

---

Vue.extend

// can be  Function | Object
import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
if(typeof SourceComponent === 'function'){
  export default SourceComponent.extend({
      methods: {thatActualMethodBehaviour(){}}
  })
} else {
  export default Vue.extend(SourceComponent).extend({
      methods: {thatActualMethodBehaviour(){}}
  })  
}

Option/ Composition - mixins

// must be Object
import SourceComponentOption from 'node_modules/somePackageName/components/footer.vue'
if(typeof SourceComponent !== 'function'){
  export default Vue.extend({
      mixins: [SourceComponentOption],
      methods: {thatActualMethodBehaviour(){}}
  })
}

---

-Y U DO DIS ?!?? - 路径

import SourceComponentOption from 'node_modules/somePackageName/components/footer.vue'
export default Object.assign({}, SourceComponentOption, {methods: Object.assign({}, SourceComponentOption.methods, {thatActualMethodBehaviour: function(){}}))

---

打字稿：vue-property-decorator

import {Vue, Component} from 'vue-property-decorator'
import SourceComponent from 'node_modules/somePackageName/components/footer.vue'
@Component<CustomComponent>({...hooks})
export default class CustomComponent extends SourceComponent{
   methods: thatActualMethodBehaviour(){}
}