问题:覆盖Vue的mixin方法

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

我在node_modules/somePackageName/components/footer.vue中有一个 npm 包组件,它使用来自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
  }
},

但它不像我想要的那样工作。

\u003du003du003du003d 更新 u003du003du003du003d

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

解答

Vue 扩展的地方

所以基本上你想要做的是通过自定义方法扩展你当前的组件。这可以通过Vue.extend完成。 Vue 通过将一个组件分配给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(){}}
  })  
}

选项/组合 - 混合

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