how to import a component from a file that has several components

0

Issue

I want to import a specific Vue component from a file that has several vue components into another component file

I have tried the normal import component from ‘./components/SeveralComponents but that didn’t work

Vue.component('firstComponent', {
    props: [a,b,c],
    template: <p>hello world</p>
});

Vue.component('secondComponent', {
    props: [c,d,e],
    template: <h1> heading1 </h1>
});

<div>
    <secondComponent></secondComponent>
</div>

export default {
    name: 'SeveralComponents',
    data() {
},
    methods: {
        method1() {
}

How do i import firstComponent into another component file?

I expect just the firstComponent

Solution

You can export the options object using a named export, and register the object with Vue in another step.

Then import the named export in your client file.

export const firstComponent = {
    props: [a,b,c],
    template: <p>hello world</p>
}
Vue.component('firstComponent', firstComponent); 


import {firstComponent} from 'MultiComponent.vue'

Answered By – Steven Spungin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More