Как продлить еще один компонент 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 }