导入vue组件并扩展模板

【问题标题】：Import vue component and extend template导入vue组件并扩展模板
【发布时间】：2017-05-29 07:27:54
【问题描述】：

是不是可以扩展通过NPM安装的导入组件的模板？

我试过了，但是不行。

import Foo from 'Foo'

export default {
     extends: Foo,

     template: `<p>foo</p>`
}

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

.vue 文件仅导出组件定义，因此您可以执行以下操作：

import Foo from 'Foo'

var Bar = {

    // inherit everything from Foo
    mixins: [Foo], 

    // rewrite the template
    template: `<div>` + Foo.template + `</div>`
}

export default Bar

请记住，Foo 只是一个对象，它只是组件的定义，就像您在自己的组件中导出的一样，因此您可以随意使用它的所有选项，但如果您修改它们，您影响他们在整个项目中的使用。在做类似的事情时要三思：

Foo.template = `<div>${Foo.template}</div>`

【讨论】：