Question

     ...<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'

Answer 1

来自here：

而不是：

myLoader.item.f()

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

Answer 2

您需要在当前的QML中加载TabContainers个实例，并在其上调用函数tabClicked()才能生效。

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

如果您的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);
    }
  }
}

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

2 个答案: