Блог

У меня есть такой компонент, как:

 <template>
  <div>
    <some-module />
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator';
  import SomeModule from '../../node_modules/somemodule/SomeModule.vue'
  import MyComponent from 'MyComponent.vue'

  @Component({
    components: {
        SomeModule
     }
  })
  export default class AppMyRootComponent extends Vue {
  }
</script>
  

И я знаю, что у этого модуля есть подкомпонент, поэтому этот модуль может быть похож:

 <template>
  <div>
    <module-component />
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator';
  import ModuleComponent from 'ModuleComponent'

  @Component({
    components: {
        ModuleComponent
     }
  })
  export default class SomeModule extends Vue {
  }
</script>
  

Мне нужно использовать SomeModule с неизменным исходным кодом, но мне нужно изменить ModuleComponent MyComponent , когда я его использую.

Самый простой способ — написать собственный класс, расширяющий этот из модуля, и использовать собственный класс в проекте. Я могу предоставить собственный внутренний компонент, который изменяет исходный.