Custom Component in qml

Question

I am Using custom inputRow and MenuButton is placed Outside component when i try to print value of Val1 and Val2 it gives "ReferenceError: val1 is not defined", how can i access it Outside component.

InputRow {
    name:"Command"
    enabled: true
    filename: "qrc:/AutonomyPlatform/Images/Parameters.svg"
    
    component:  Column {
        spacing: 10
        Row{
            spacing: 50
            
            Text {
                text: "Val1"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
            TextInput {
                id:val1
                width: 5
                text: selectedModel ? "0" : ""
                font.pointSize: 10
                color: Colors.menuBodyTextInput
            }
            
            Text {
                text: "m"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
        }
        Row {
            spacing: 50
            
            Text{
                text: "Val2"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
            
            TextInput {
                id:val2
                width: 5
                text: selectedModel ? "0" : ""
                font.pointSize: 10
                color: Colors.menuBodyTextInput
            }
            
            Text {
                text: "m"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
        }
    }                    //End of Column
    MenuButton {
        label: "Send"
        buttonHeight: 25
        buttonWidth: 35
        onMenuButtonClicked:
        {
            console.log("VAL1",val1.text)   //ReferenceError: val1 is not defined,
            console.log("VAL2",val2.text)
            console.log("SEND")
            
        }
    }
}

When i put Menubutton inside column component it prints as expected but when its outside component i get ReferenceError as mentioned above

Answer 1

Got a way to access this :

 InputRow{
       id: userForm
       property var userInput1
       property var userInput2

       component : 
           Column{
...
          TextInput {
                   id:val1
                   text: "777"
                   onTextChanged: userForm.userInput1 = text
                   Component.onCompleted : userForm.userInput1 = text 
               }
           }
MenuButton{
   onClicked : console.log(userForm.userInput1)
}

Answer 2

As I mentioned above that could be done in a declarative style: For example:

Window {
    id: window
    visible: true
    width: 400
    height: 600
    title: qsTr("Test")

    property string str1: ""
    property string str2: ""

    onStr1Changed: printOut();
    onStr2Changed: printOut();

    function printOut()
    {
        console.log(str1, str2);
    }

    ColumnLayout {
        anchors.centerIn: parent
        Loader {
            id: loader1
            sourceComponent: TextInput {
                id: txt1
                text: "xxx"
                Binding {
                    target: window
                    property: "str1"
                    value: txt1.text
                }
            }
        }

        Loader {
            id: loader2
            sourceComponent: TextInput {
                id: txt2
                text: "xxx"
                Binding {
                    target: window
                    property: "str2"
                    value: txt2.text
                }
            }
        }
    }

    Component.onCompleted: {
        loader1.active = true;
        loader2.active = true;
    }
}