QML not working

[MartinD]

Why this code works:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true

    Rectangle {
        anchors.fill: parent

        property int a: 300;

        MouseArea {
            anchors.fill: parent
            onClicked: {
              console.log(a) // prints 300
            }
        }
    }
}

and why this code doesn't work:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true

    //Rectangle {
     //   anchors.fill: parent

        property int a: 300;

        MouseArea {
            anchors.fill: parent
            onClicked: {
              console.log(a) // prints ReferenceError: a is not defined
            }
        }
  //  }
}

[A Former User]

Hi!

In your first example a is a property of the rectangle and the mouse area is a child of the rectangle. Thus the mouse area can access a.

In your second example a is a property of the window and the mouse area is a child of the window's contentItem. This contentItem is not a child of the window but an attached property of the window. Thus the mouse area cannot access it.

If you give the window its own id, say mainWindow you can access a everywhere with mainWindow.a.

See also: http://doc.qt.io/qt-5/qml-qtquick-window-window.html#contentItem-attached-prop