javascript - Proper way to override properties and methods in Vue.js? - Stack Overflow

admin管理员组

文章数量:1410682

What is the proper way to override methods using mixins in Vue.js? I know that you're able to mock inheritance using mixins, but let's say that you want to extend some props but not pletely override the entire prop value.

For instance I have a baseCell, but I also need to have ponents that will be similar but function differently for <td>s and <th>s, so I create two additional ponents that use the baseCell as the mixin.

var baseCell = {
  ...
  props: {
    ...
    initWrapper: {
      type: String,
      default: 'td'
    },
    ...
  },
  methods: {..}
};

In the ponents setting the props as such will pletely override all the values.

Vueponent('tableHeader', {
  mixins: [baseCell],
  props: {
    initWrapper: {
      default: 'th'
    }
  }
}

I've e up with a solution of merging the properties but it seems sort of hacky, and I'm not sure if there is a better solution.

Vueponent('tableHeader', {
  mixins: [baseCell],
  props: Object.assign({}, baseCell.props, {
    initWrapper: {
      default: 'th'
    }
  })
});

With this, I retain the baseCell props, but some defined ones in the object passed.

What is the proper way to override methods using mixins in Vue.js? I know that you're able to mock inheritance using mixins, but let's say that you want to extend some props but not pletely override the entire prop value.

For instance I have a baseCell, but I also need to have ponents that will be similar but function differently for <td>s and <th>s, so I create two additional ponents that use the baseCell as the mixin.

var baseCell = {
  ...
  props: {
    ...
    initWrapper: {
      type: String,
      default: 'td'
    },
    ...
  },
  methods: {..}
};

In the ponents setting the props as such will pletely override all the values.

Vue.ponent('tableHeader', {
  mixins: [baseCell],
  props: {
    initWrapper: {
      default: 'th'
    }
  }
}

I've e up with a solution of merging the properties but it seems sort of hacky, and I'm not sure if there is a better solution.

Vue.ponent('tableHeader', {
  mixins: [baseCell],
  props: Object.assign({}, baseCell.props, {
    initWrapper: {
      default: 'th'
    }
  })
});

With this, I retain the baseCell props, but some defined ones in the object passed.

• javascript
• vue.js
• vuejs2

Share Follow edited Jul 13, 2022 at 22:54 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Nov 16, 2016 at 18:01 kylekyle 2,64866 gold badges2525 silver badges3737 bronze badges 4

• 2 The documentation vuejs/v2/guide/mixins.html#Option-Merging clearly states that that the ponent will take precendence on merges. As a result, your solution seems quite reasonable. – David L Commented Nov 16, 2016 at 19:52
• @DavidL Thank you for looking at the question. I had seen that part of the docs but only glanced over it. Your ment made me dig a little deeper into the source and as a result I found this issue that addresses the question of merging data and props... github./vuejs/vue/issues/2897 It looks like the current solution is to do it as I currently am. – kyle Commented Nov 16, 2016 at 20:31
• 1 Agreed, based on that issue it definitely would seem like you picked the right solution. Happy to help :) – David L Commented Nov 16, 2016 at 20:32
• What about using extends instead of mixins? I can still pass the original props. – adi518 Commented Aug 9, 2017 at 13:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

In Vue > 2.2 you can use custom option merge strategies to achieve what you want. Note that the strategy applies to all mixins.

An example can be found here in the docu: https://v2.vuejs/v2/guide/mixins.html#Custom-Option-Merge-Strategies

本文标签： javascriptProper way to override properties and methods in VuejsStack Overflow