导入vue组件并扩展模板

Question

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

我已经试过了，但是没用。

import Foo from 'Foo'

export default {
     extends: Foo,

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

Answer 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>`

导入vue组件并扩展模板

Import vue component and extend template

vue.js

vue-component

vuejs2