Child component doesn't merge className from parent.

Vue.js version

2.1.4

Reproduction Link

https://jsfiddle.net/JounQin/s5b79kqc/

Steps to reproduce

Just look at the output HTML

What is Expected?

Child comp should has className abc def

What is actually happening?

The className is abc abc def

Is that by design?

[fnlctrl]

Sorry but I don’t really understand your use case, that seems over-engineering to me. If you really need to bind a static class abc twice (once in component’s template, once in parent’s template, as shown in your fiddle), you or the build system is probably doing something wrong.

[JounQin]

@yyx990803 actually it does not.

However, there is a problem when using vue-loader which makes me to use composes.

Consider two component:

// BaseComp.vue

<template>
  <div :class="$style.base">
    BaseComp.vue
  </div>
</template>
<style module>
  .base{
    color: red;
    background-color: green;
  }
</style>

// Hello.vue

<template>
  <BaseComp :class="$style.hello"/>
</template>
<script>
  import BaseComp from './BaseComp.vue'

  export default {
    name: 'hello',
    components: {
      BaseComp
    }
  }
</script>
<style module>
  .hello {
    color: blue;
    background-color: pink;
  }
</style>

Obviously I want to override the style of .base, but actually it does not work because the style of BaseComp.vue is loaded after Hello.vue……

http://test.1stg.me/