Как продлить еще один компонент VueJS в однофайловой компоненте? (ESU vue-loader)

Я использую vue-loader (http://vuejs.github.io/vue-loader/start/spec.html) для создания моих *.vue однофайловых компонентов, но у меня возникают проблемы с процесс от расширения однофайлового компонента от другого.

Если один компонент следует спецификатору export default { [component "Foo" definition] }, я думаю, что это просто вопрос импорта этого компонента (как и с любым дочерним компонентом), а затем export default Foo.extend({ [extended component definition] })

К сожалению, это не сработает. Кто-нибудь может предложить совет?

Ответ 1

Правильный способ сделать это - использовать mixins: http://vuejs.org/guide/mixins.html

Подумайте о микшинах как абстрактных компонентах, которые вы можете расширить. Таким образом, вы можете создать mixin с любой функциональностью, которую вы хотели иметь в обоих, а затем просто применить ее к каждому из ваших компонентов.

Ответ 2

После некоторого тестирования простое решение заключалось в том, чтобы экспортировать объект Vue.extend(), а не простой объект для любого расширяемого компонента.

В моем случае базовый компонент:

import Vue from 'vue'

export default Vue.extend({ [component "Foo" definition] })

и расширенный компонент:

import Foo from './Foo'

export default Foo.extend({ [extended component definition] })

Ответ 3

Другая возможность - это опция extends:

import Foo from './Foo'

export default { extends: Foo }