Open philipfeldmann opened 5 years ago
It's not pretty solution, but meanwhile you can
import themeMixin from './theneMixin';
<script>
export default {
name: 'Test',
props: {...themeMixin.props}
}
</script>
You can also lodash merge on the whole "export default" object
Following... this can be a good feature with .sync
Wow, this is a really annoying bug. Just spent half a day trying to figure out why my component misbehaved. It was this bug!
I'm having a bunch of components that all share some properties, so I've moved them into a mixin (also tried with extending from a parent component).
The prop binding works perfectly when using the component normally, in an SPA for example. When building it as a webcomponent though, the prop binding will no longer be recognized: The component is still able to access the prop attribute correctly, but will always chose the default value - or undefined if no default is provided.
Example:
Mixin:
MyComponent:
Using the Webcompenent:
<webcomponent-test theme="custom"></webcomponent-test>
This will display 'defaultTheme' instead of 'custom'. When adding the prop directly to the component it works fine though.