Passing dynamic QML data

[IRRIS]

Hi everyone,

I am a beginner in QML. I am alone and ask for help.

Load B QML dynamically from A QML.

[A QML]

Loader {
        id: testButton
        source: "/SkinControl/ctl_Button.qml"
        x: 100; y: 100
        width: 200
        height: 100
    }

    Connections {
        target : testButton.item
        onMessage : console.log(msg)
    }

[B QML]

Rectangle {
    id: ctlButtonSquare
    anchors.fill: parent
    anchors.top: parent.top; anchors.left: parent.left;
    color: "black"

    signal message(string msg)

    Image {
        id : upImage
        source: "a"
    }

    MouseArea {
        id: ctlButtonSquareMouseArea
        anchors.fill: parent
        hoverEnabled: true

        acceptedButtons: Qt.AllButtons
        onPressed: (mouse) => {
                       ctlButtonSquare.message("onPressed")
                   }

        onReleased: (mouse) => {
                        ctlButtonSquare.message("onReleased")
                    }

        onPressAndHold : (mouse) => {
                             ctlButtonSquare.message("onPressAndHold")
                         }

        onClicked: (mouse) => {
                       ctlButtonSquare.message("onClicked")
                   }

        onDoubleClicked: (mouse) => {
                             ctlButtonSquare.message("onDoubleClicked")
                         }
    }
}

I understand the part of passing QML B click events to QML A.

I have confirmed that "signal" can be used.

The question is how to pass data from A QML to B QML.

I know that things like x, y, width, and height are applied,

I would like to know how to pass a string or value such as buff or text.

I need an example source or advice on how to handle it.

Please help.

thank you

[Question summary]
How to pass buff, text, value, etc. from A QML to B QML.

[fcarney]

B_QML

Rectangle {
  ...
  property string someData: "some data"
  ...
}

A_QML

testButton.item.someData // access top level properties like variables

[Venkata Subbaiah]

QmlPage1.qml

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Rectangle{
    id:_rect
    width:300
    height:300
    color:"cyan"
    property  alias mySource:testButton.source;
    RowLayout{
        anchors.centerIn: parent
        spacing: 20
        Button{
            id:_buttonLoadComponent
            text:"Load Component"
            onClicked:
            {
                console.log("button clicked----");
                testButton.source="QmlPage2.qml"
                testButton.item.color="pink";
            }
        }
        Button{
            id:_buttonChangeColorOfComponent
            text:"ChangeColorOfComponent"
            onClicked: {
                console.log("Color change button clicked");
            }
        }
    }
    Loader {
        id: testButton
        anchors.top:_rect.bottom
    }
    
    Connections {
        target : testButton.item
        function onMessage(s)
        {
            console.log(s)
        }
        function onColchang(s)
        {
            s.color="yellow";
        }
    }
}

QmlPage2.qml

import QtQuick 2.0
Rectangle {
    id: ctlButtonSquare

    width:150
    height:150
    color:"#456234"

    signal message(string s);

    Text {
        id: txt
        anchors.centerIn: parent
        text: "Hello"
    }

    MouseArea {
        id: ctlButtonSquareMouseArea
        anchors.fill: parent
        hoverEnabled: true

        acceptedButtons: Qt.AllButtons
        onPressed: (mouse) => {
                       txt.text="onPressed";
                       ctlButtonSquare.message("onPressed");
                       ctlButtonSquare.colchang(ctlButtonSquare)

                   }

        onReleased: (mouse) => {
                        txt.text="onReleased";
                        ctlButtonSquare.message("onReleased")
                    }

        onPressAndHold : (mouse) => {
                             txt.text="onPressAndHold";
                             ctlButtonSquare.message("onPressAndHold")
                         }
        onClicked: (mouse) => {
                       txt.text="onClicked";
                       ctlButtonSquare.message("onClicked")
                   }

        onDoubleClicked: (mouse) => {
                             txt.text="onDoubleClicked";
                             ctlButtonSquare.message("onDoubleClicked")
                         }
    }
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id:_root
    width: 640
    height: 480
    visible: true
    title: qsTr("Dynamic Element Creation Main Window")
    QmlPage1{id:_id;anchors.top:parent.top;}
}

[IRRIS]

@fcarney
Thank you very much.
QML is an unfamiliar language.

Thanks it has been resolved.

[IRRIS]

@Venkata-Subbaiah
I didn't understand the content, so I looked at it for a long time.
And I understand what your intentions are.

Thanks for giving me a good way.