如何将“this”从 QML 元素传递给 JS 函数

Question

类似于 C++ 中的 this 关键字，我想要一个 QML 元素将自己传递给 JS 函数，或者让它在另一个元素上为自己设置一个属性。这可能吗？

例如：

Rectangle{
id:theParent

property var theElement

SomeElement{
id:theChild
   MouseArea {
        anchors.fill:parent
        onClicked: {
            someJsFunction(*whatGoesHere*)
            parent.theElement=*whatGoesHere*
        }
    }

或者，考虑一下：

Rectangle{
id:theParent

property var theElement

SomeElement{
id:theChild
    }

然后，在 SomeElement.qml 中：

Rectangle{
   MouseArea {
        anchors.fill:parent
        onClicked: {
            someJsFunction(*whatGoesHere*)
            parent.theElement=*whatGoesHere*
        }
}
}

在这种情况下，*whatGoesHere* 将是调用它们的 SomeElement 的实例。

这在 QML 中可行吗？我认为id 属性是有意义的，但是根据文档，您无法查询id 字段的值，并且无论如何，如果我的SomeElement 在单独的文件，并且上面的 whatGoesHere 处理出现在该单独的文件中，而不是在特定实例中。

Answer 1

我有两个互补的建议：

首先，对于单一用途，传递 ID，因为它基本上是指向项目的指针：

MouseArea {
    id: myClicker;
    onClicked: { callFunc (myClicker); }
}

如果您需要多个项目来共享此行为，这意味着您正在使用 MVC，因此 ID 将完全相同：

Repeater {
    model: 100;
    delegate: MouseArea {
         id: myClicker;
         onClicked: { callFunc (myClicker); }
    }
}

这是经典部分。

但是，如果您创建自己的组件，要做得更好，请记住创建一个“self”辅助属性，以正确完成“this”工作：

MouseArea { // component root definition
    id: base;

    property var self : base; // bind self on the I
}

然后像这样使用它：

Repeater {
    model: 100;
    delegate: MyComponent {
         onClicked: { callFunc (self); }
    }
}

随心所欲地使用它！

Answer 2

SomeElement 的实例是它的id 属性值，即theChild。您可以将其用作this。据我所知，不存在其他内置方式。但您可以尝试添加您自己的 QML 项目层次结构，其属性将返回 this。

另一种方法是获取某个父级的子级并使用它们。所以你得到孩子，找到你需要的孩子并使用那个特定的实例

Answer 3

如果你在一个单独的文件中定义你的元素，那么你可以简单地分配一个id 并使用它。它仅在该实例的上下文中有效：

SomeElement.qml

Rectangle{
   id: thisElement
   MouseArea {
        anchors.fill: parent
        onClicked: {
            someJsFunction(thisElement);
            parent.theElement = thisElement;
        }
   }
}