Alun
168
2
Vue

Extending Vue SFC, methods from child component not working

Posted 3 months ago by Alun

Hi there,

I have a base component which sometimes I need to extend with some extra functionality, they look like this:

// ParentComponent.vue
<template>
    <some-html>
        <more-html-stuff />
        <button type="button" class="btn" @click="debug()">Debug</button>
    </some-html>
</template>
<script>
export default {
    name: 'ParentComponent',
    props: {
        // some props
    },
    computed:{
        returnSomething(){
            return this.prop_X;
        }
    },
    methods: {
        // methods
        debug(){
            console.log('this is parent');
        }
    }
};
</script>

// Child_1.vue
<template>
    <parent-component v-bind="$props" />
</template>
<script>
import ParentComponent from './ParentComponent';
export default {
    name: 'ChildComponent',
    components: {ParentComponent},
    extends: ParentComponent,
    props: {
        another_property: {}
    },
    computed: {
        returnSomething(){
            return 'anotherThing';
        }
    },
    methods: {
        debug(){
            console.log('this is child');
        }
    }
};
</script>

By using ParentComponent as a component in the child, I can reutilize the template, however I think that's leading to an issue when I click the debug button and no matter what component I'm using, only the parent's method is being called.

Any orientation here please? Thank you all

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.