如何从另一个 QML 文件调用 QML 文件中定义的 Javascript 函数？

Posted 2023-02-16

【中文标题】如何从另一个 QML 文件调用 QML 文件中定义的 Javascript 函数？

【英文标题】：How to call a Javascript function defined in a QML file from another QML file?

【发布时间】：2013-10-16 08:45:38

【问题描述】：

     ...<other code>
     MouseArea
      
        anchors.fill: parent

        onClicked:
        
          console.log ("You clicked on tab!");


          TabContainers.tabClicked (index);
        
      
     ...<other code>

此代码在文件X.qml 中。另一个名为TabContainers.qml 的文件包含一个名为tabClicked 的函数。

我希望在文件X.qml 中调用该函数，所以我尝试了：TabContainers.tabClicked (index);

这给了我错误：ReferenceError: TabContainers is not defined

如何在另一个 QML 文件中调用一个 QML 文件中定义的函数？

更新：

---

这是我尝试过的：

TestB.qml

import QtQuick 2.0

Rectangle 

  id: myItem
  width: 100; height: 100

  function f ()
  
    console.log ("sadsad");
  

TestA.qml

import QtQuick 2.0

Item 

  width: 100; height: 100

  Loader 
  
    id: myLoader
    source: "TestB.qml"
  

  Connections 
  
    target: myLoader.f()
  

我得到的错误是：TestA.qml:15: TypeError: Object [object Object] has no method 'f'

【参考方案1】：

来自here：

而不是这个：

myLoader.item.f()

我宁愿这样称呼f()：myLoader.f()

【参考方案2】：

您需要在当前 QML 中加载一个 TabContainers 实例并在其上调用函数 tabClicked() 以使其工作。

如果您的 TabContainers 实例加载到应用程序的另一个 QML 文件中，您还可以在它们的共同祖先之一中定义 signal 并在 X.qml 中发出信号并使用 @ 将其捕获到 TabContainers.qml 987654321@组件。

如果您的 TabContainers 实例加载到加载 X.qml 的父级中，您还可以引用您的 TabContainers 实例的 ID 来调用该函数。

第二种解决方案的示例

Parent.qml

import QtQuick 2.0

Rectangle 

  id: rootItem
  width: 300; height: 300

  signal handleTabClicked(int value);

  A 
    id: myElemA
    anchors.left: parent.left
  

  B 
    id: myElemB
    anchors.right: parent.right
  

A.qml

import QtQuick 2.0

Rectangle 

  id: myItem
  width: 80; height: 80
  color: "yellow"

  Connections 
    target: rootItem
    onHandleTabClicked: 
      f();
    
  

  function f ()
  
    console.log ("sadsad");
  

B.qml

import QtQuick 2.0

Rectangle 

  id: myItem
  width: 150; height: 150
  color: "red"
  MouseArea 
    anchors.fill: parent
    onClicked: 
      rootItem.handleTabClicked(4);
    
  

【讨论】：

我在我的问题中添加了一个示例。但是真的很难理解你想做什么，用一个真实的例子来解释可能会更容易

如何获取 onHandleTabClicked 中的参数：？