Làm cách nào để mở rộng một thành phần VueJS khác trong một thành phần tệp đơn? (ES6 vue-loader)

Question

Tôi đang sử dụng bộ nạp-vue (http://vuejs.github.io/vue-loader/start/spec.html) để xây dựng các thành phần đơn *.vue của mình, nhưng tôi gặp sự cố với quá trình mở rộng thành phần một tệp từ một thành phần khác.

Nếu một thành phần sau spec để export default { [component "Foo" definition] }, tôi sẽ nghĩ nó chỉ là một vấn đề nhập khẩu thành phần này (như tôi làm với bất kỳ thành phần con) và sau đó export default Foo.extend({ [extended component definition] })

Thật không may này không hoạt động. Bất cứ ai có thể vui lòng cung cấp lời khuyên?

Answer 1

Cách thích hợp để làm điều này sẽ được sử dụng mixins: http://vuejs.org/guide/mixins.html

Hãy suy nghĩ về mixins như các thành phần trừu tượng, mà bạn có thể mở rộng. Vì vậy, bạn có thể tạo một mixin với bất kỳ chức năng nào bạn muốn có trong cả hai, và sau đó chỉ áp dụng nó cho mỗi thành phần của bạn.

Answer 2

Sau một số thử nghiệm, giải pháp đơn giản là đảm bảo xuất đối tượng Vue.extend() thay vì đối tượng đơn giản cho bất kỳ thành phần nào đang được mở rộng.

Trong trường hợp của tôi, các thành phần cơ bản:

import Vue from 'vue' 

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

và các thành phần mở rộng:

import Foo from './Foo' 

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

Answer 3

Một khả năng khác là extends tùy chọn:

import Foo from './Foo' 

export default { extends: Foo }