Binding signal and the function from another file

[Alexorleon]

Hi!
I can't find, how to bind signal and the function from another file.

main.qml

PlayerForWindowPad {
        anchors.fill: parent
}

PlayerForWindowPad.qml

RowLayout {
    id: rootLayout
    spacing: 1

    function foo1() {
        console.log("foo1")
    }
    function foo2() {
        console.log("foo2")
    }
    function foo3() {
        console.log("foo3")
    }

    PadButtonPForW {
        imageOn: "qrc:/images/outline-play.png"
        imageOff: "qrc:/images/outline-pause.png"
        // ????? action foo1
    }
    PadButtonPForW {
        imageOn: "qrc:/images/outline-stop.png"
        imageOff: "qrc:/images/outline-replay.png"
        // ????? action foo2
    }
    PadButtonPForW {
        imageOn: "qrc:/images/outline-audio-on.png"
        imageOff: "qrc:/images/outline-audio-off.png"
        // ????? action foo3
    }
}

PadButtonPForW.qml

Item {
    id: root
    width: 40
    height: 40

    property string imageOn
    property string imageOff

    signal action

    Image {
        id: image
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        source: imageOff

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                root.state = root.state == "on" ? "off" : "on"
            }
        }
    }

    states: [
        State {
            name: "on"
            PropertyChanges { target: image; source: imageOn }
        },
        State {
            name: "off"
            PropertyChanges { target: image; source: imageOff }
        }
    ]
}

Please help, how to pass a function to another file?

[kshegunov]

    PadButtonPForW {
        imageOn: "qrc:/images/outline-audio-on.png"
        imageOff: "qrc:/images/outline-audio-off.png"
        onAction: {
            // ... code ...
        }
    }

But you never raise the action signal from your component. I'd assume the onClick handler should be modified like this:

MouseArea {
    id: mouseArea
    anchors.fill: parent
    onClicked: {
        root.state = root.state == "on" ? "off" : "on"
        action(); // Emit the signal!
    }
}

[kshegunov]

    PadButtonPForW {
        imageOn: "qrc:/images/outline-audio-on.png"
        imageOff: "qrc:/images/outline-audio-off.png"
        onAction: {
            // ... code ...
        }
    }

But you never raise the action signal from your component. I'd assume the onClick handler should be modified like this:

MouseArea {
    id: mouseArea
    anchors.fill: parent
    onClicked: {
        root.state = root.state == "on" ? "off" : "on"
        action(); // Emit the signal!
    }
}

[Alexorleon]

@kshegunov, thank you so much! I thought I had already tried all the options) Yes, it is working!