javascript - Override Vue's mixin method - Stack Overflow

admin管理员组

文章数量:1345199

Is there a way to override some of npm's mixin which is called inside the ponent by the local one ?

I have an npm package ponent inside node_modules/somePackageName/ponents/footer.vue which use another of it's mixins from node_modules/somePackageName/mixins/popup.js

That popup.js contains following method:

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

And I want to override it's behaviour from App.vue where I use that footer.vue ponent with something like this:

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

But it doesn't work as I wanted to.

==== UPDATE ====

Here is the explanation of How I solved my issue based on @Estradiaz's answer:

Is there a way to override some of npm's mixin which is called inside the ponent by the local one ?

I have an npm package ponent inside node_modules/somePackageName/ponents/footer.vue which use another of it's mixins from node_modules/somePackageName/mixins/popup.js

That popup.js contains following method:

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

And I want to override it's behaviour from App.vue where I use that footer.vue ponent with something like this:

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

But it doesn't work as I wanted to.

==== UPDATE ====

Here is the explanation of How I solved my issue based on @Estradiaz's answer:

• javascript
• vue.js

Share Improve this question Follow edited Jul 4, 2019 at 12:16 aspirinemaga asked Jul 3, 2019 at 20:54 aspirinemagaaspirinemaga 3,9571111 gold badges5858 silver badges106106 bronze badges 4

• cant you just class ExtendedComp extends Original{setPopupActiveStatus (val, blur = true) { //this.super();\n const isVisible = true; }}? – Estradiaz Commented Jul 3, 2019 at 21:04
• @Estradiaz - I think it's a to high level of JS for me to understand the implementation of your code without an example. – aspirinemaga Commented Jul 3, 2019 at 21:12
• aspirinemaga, could you get the example ball rolling with a codesandbox or a little more description of your issue? – KyleMit ♦ Commented Jul 3, 2019 at 21:13
• 1 @aspirinemaga my bad i am way to much in the space of typescript - but the basic idea is like vuejs/v2/api/#Vue-extend , Vue.extend(OriginalCompOption).extend(changes) or OriginalComp.extend(changes) depends on the export in footer.vue, actually its the same as ClonedOriginalComp.mixins.push(changes) – Estradiaz Commented Jul 3, 2019 at 21:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

When bining mixin & ponent options:

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

• Data objects undergo a recursive merge, with the ponent’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 ponent’s own hooks.

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

Here's an example of a method provided by both a ponent and a 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"

And here's an example in codesandbox

So I believe you should be able to "override" the mixin simply by providing a method with the same name on the ponent and it will take priority

Where Vue extends

So basically what you want to do is to extend your current ponent by a custom method. This can be done with Vue.extend. Vue provides an option to worryless clone/extend ponents by assigning one ponent to the extends option:

Option/ Composition - extends

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

---

Vue.extend

// can be  Function | Object
import SourceComponent from 'node_modules/somePackageName/ponents/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/ponents/footer.vue'
if(typeof SourceComponent !== 'function'){
  export default Vue.extend({
      mixins: [SourceComponentOption],
      methods: {thatActualMethodBehaviour(){}}
  })
}

---

the - Y U DO DIS ?!?? - path

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

---

typescript: vue-property-decorator

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

本文标签： javascriptOverride Vue39s mixin methodStack Overflow