Can I extend component's MouseArea in main.qml?

Question

If I declare a MouseArea in SidebarMenuButton.qml component like this:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Button {
    width: buttonNewMessage.width
    height: buttonNewMessage.height
    anchors {
        horizontalCenter: parent.horizontalCenter
        topMargin: 5
    }
    style: ButtonStyle {
        background: Rectangle {
            color: 'transparent'
        }
        label: Text {
            text: control.text
            color: 'white'
            font.family: 'Helvetica'
            font.pixelSize: 12
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
        }
    }

    MouseArea {
        anchors.fill: parent
        cursorShape: "PointingHandCursor"
    }
}

And use it in main.qml like this:

    SidebarMenuButton {
        id: buttonInbox
        text: 'Inbox'
        anchors.top: buttonNewMessage.bottom

        MouseArea {
            anchors.fill: parent
            onClicked: {
                newMessageContainer.visible = false;
                inboxContainer.visible = true;
            }
        }
    }

Then the button in main.qml overrides MouseArea of SidebarMenuButton.qml Can I extend that MouseArea instead of overriding it?

Answer 1

The question is : "why do you put another MouseArea over the one that already exists in the Button, instead of re-using it ? And even more, why do you put a MouseArea in a Button component, which already has its own one".

If you need to be able to use onClicked: { ... } in the main.qml, you simply need to forward the signal, so just declare signal clicked (); in your custom component and then trigger it from the inner MouseArea, so you'll be able to catch it from outside.

But I'm still thinking something in your code is plain wrong...