npm 패키지에서 가져온 vue 구성 요소를 확장하는 방법

npm 패키지에서 가져온 vue 구성 요소를 확장하는 방법

노드를 통해 설치된 vue 구성 요소가 있는 경우:

node_modules/vendor/somecomponent.vue

이 구성 요소의 템플릿/방법 수정/확장 방법이 있는가?

업데이트:

아래 예제를 시험해 본 후, 나는 이 문제에 직면하게 되었다.

나는 https://github.com/eliep/vue-avatar을 사용하고 있는데, 이것을 소품으로 확장해야 하고, 어쩌면 템플릿을 약간 수정해야 할지도 몰라.

import {Avatar} from 'vue-avatar'

Avatar = Vue.component('Avatar').extend({
      props: ['nationality']
});

export default {
        components: {
            Avatar
        }, 

       ...
}

결과:TypeError: Cannot read property 'extend' of undefined

구체적으로 문서화되지는 않았지만, Vue 자체의 방법은 구성 요소에서 이용할 수 있다.템플릿을 재정의하고 메서드(및 데이터 및 소품)를 추가할 수 있다.

Vue.component('someComponent', {
  template: '<div>hi {{name}} {{one}}</div>',
  data: () => ({
    name: 'original'
  }),
  props: ['one'],
  methods: {
    original: function() {
      this.name = 'original';
    }
  }
});

const myC = Vue.component('someComponent').extend({
  template: '#my-template',
  props: ['two'],
  methods: {
    another: function() {
      this.name = 'another';
    }
  }
});


new Vue({
  el: '#app',
  components: {
    myComponent: myC
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.3/vue.min.js"></script>
<div id='app'>
  <my-component one="arf" two="meow"></my-component>
</div>

<template id="my-template">
  <div>Look, it's {{name}} {{one}} {{two}}
  <button @click="original">Call original</button>
  <button @click="another">Call another</button>
  </div>
</template>

AvatarVue가 구성 요소 개체를 생성할 단순 JavaScript 개체인 구성 요소 사양으로 표시됨.다음을 시도해 보십시오.

Vue.component('originalAvatar', Avatar);
const newAvatar = Vue.component('originalAvatar').extend({
  /* Your spec */
});

참조URL: https://stackoverflow.com/questions/42766697/how-to-extend-vue-component-imported-from-npm-package