Question

是否有一种方法可以覆盖npm的某些mixin，而该方法在组件内部由本地调用？

我里面有一个npm软件包组件 node_modules/somePackageName/components/footer.vue使用其中的另一个mixins 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

Vue延伸到哪里

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

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

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

Answer 2

combining mixin & component options时：

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



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

  具有相同名称的

Hook函数被合并到一个数组中，以便将全部调用它们。 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，并且它将具有优先权

覆盖Vue的mixin方法

2 个答案:

Vue延伸到哪里

combining mixin & component options时：