如何扩展从 npm 包导入的 vue 组件? [英] How to extend vue component imported from npm package?

问题描述

如果你有一个通过 Node 安装的 vue 组件:

node_modules/vendor/somecomponent.vue

有没有办法修改/扩展这个组件的模板/方法?

更新:

在尝试了下面的示例后，我遇到了这个问题:

我正在使用 https://github.com/eliep/vue-avatar 和我需要用一个道具来扩展它，也许还要修改一下模板.

从'vue-avatar'导入{Avatar}Avatar = Vue.component('Avatar').extend({道具:['国籍']});导出默认{成分: {头像},...}

导致 TypeError: 无法读取未定义的属性 'extend'

解决方案

它似乎没有具体记录，但是 Vue 本身的 extend 方法 可用于组件.您可以覆盖模板并添加方法(以及数据和道具).

Vue.component('someComponent', {模板:'<div>hi {{name}} {{one}}</div>',数据:() =>({名称:'原始'}),道具:['一个']，方法: {原文:函数(){this.name = '原始';}}});const myC = Vue.component('someComponent').extend({模板:'#我的模板'，道具:['二']，方法: {另一个:函数(){this.name = '另一个';}}});新的 Vue({el: '#app',成分: {我的组件:myC}});

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

<模板 id="我的模板"><div>看，它是 {{name}} {{one}} {{two}}<button @click="original">调用原件</button><button @click="another">呼叫另一个</button>

</template>

Avatar 似乎是一个组件规范，Vue 将从中创建一个 Component 对象的简单 JavaScript 对象.试试这个:

Vue.component('originalAvatar', Avatar);const newAvatar = Vue.component('originalAvatar').extend({/* 你的规格 */});

If you have a vue component that is installed via Node :

node_modules/vendor/somecomponent.vue

Is there any way to modify/extend the template/methods of this component?

Update:

After trying out the example below, I'm facing this issue:

I am using https://github.com/eliep/vue-avatar and I need to extend this with a prop, and maybe amend the template a bit.

import {Avatar} from 'vue-avatar'

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

export default {
        components: {
            Avatar
        }, 

       ...
}

Results in TypeError: Cannot read property 'extend' of undefined

解决方案

It doesn't appear to be documented specifically, but the extend method of Vue itself is available to components. You can override the template and add methods (and data and props).

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>

Avatar appears to be a component spec, the simple JavaScript object that Vue will create a Component object from. Try this:

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

这篇关于如何扩展从 npm 包导入的 vue 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！