Vuejs3 extend another component or methods

Question

How can i extend another component ??

My main component

MainComponent.vue

<template>
    <div>
        empty
    </div>
</template>

<script>
    export default {
        methods: {
            sendAlert(msg) {
                alert(msg);
            }
        }
    }
</script>

and second component;

SecondComponent.vue

<template>
    <div>
        <button @click="MainComponent.methods.sendAlert('first try')"></button>
        <!--OR-->
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>

    import MainComponent from "./MainComponent.vue"

    export default {
        extends: { MainComponent },
        methods: {
            ...MainComponent.methods
        }
    }
</script>

i can't access methods. How can i do it?

Note:(i dont want this)

<template>
    <div>
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>

    import MainComponent from "./MainComponent.vue"

    export default {
        extends: { MainComponent },
        methods: {
            Message(msg) {
                MainComponent.methods.sendAlert(msg);
            }
        }
    }
</script>

So I have one or more methods in a component. How can I use these methods in another component?

Answer 1

If you want to use same method or even same attributes you can create mixins.js file

export const YouMixins = {
    methods: {
        sendAlert(msg) {
            alert(msg);
        }    
    }
}

Then in your second component

<template>
    <div>
        <button @click="sendAlert('first try')"></button>
        <!--OR-->
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>
    import { YouMixins } from "./mixins.js"

    export default {
        mixins: [YouMixins],
    }
</script>

Note you can pass not methods only even computed, data, life cycles and more

Answer 2

Try to use this to access MainComponent method :

<template>
    <div>
        <button @click="sendAlert('second try')"></button>
    </div>
</template>

<script>

    import MainComponent from "./MainComponent.vue"

    export default {
        extends: { MainComponent },
        methods: {
            Message(msg) {
                this.sendAlert(msg);
            }
        }
    }
</script>