Menu
I am using vue-loader to construct my *.vue single-file components, but I am having trouble with the process of extending a single-file component from another.
If one component follows the spec to export default { [component "Foo" definition] }, I would think it is just a matter of importing this component (as I would with any child component) and then export default Foo.extend({ [extended component definition] })
Unfortunately this does not work. Can anyone please offer advice?
514
In Vue. JS it's possible to extend existing components . In Vue GWT we can use Java inheritance to extend a base Component. This allows you to reuse some behavior across Components.
You need to create your portfolio component first e.g. in src/components/Projects/Portfolio. vue and then import it inside the script tag within your Landing. vue component.
Using Props To Share Data From Parent To Child. VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
You use Vue. extend to create component definition (called "component constructor" in old documentation) and Vue. component to register it so it can be used in template to actually create component instance. However, everywhere in Vue API where you can pass "component constructor" created by Vue.
After some testing, the simple solution was to be sure to export a Vue.extend() object rather than a plain object for any component being extended.
In my case, the base component:
import Vue from 'vue' export default Vue.extend({ [component "Foo" definition] }) and the extended component:
import Foo from './Foo' export default Foo.extend({ [extended component definition] }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With