How to call a Javascript function defined in a QML file from another QML file?

Question

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

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


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

This code in the file X.qml. Another file named TabContainers.qml contains a function named tabClicked.

I wish to call that function in file X.qml, so I tried:
TabContainers.tabClicked (index);

This gave me the error:
ReferenceError: TabContainers is not defined

How to call a function defined in a QML file in another QML file?

UPDATE:

---

This is what I tried:

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()
  }
}

and the error I get is:
TestA.qml:15: TypeError: Object [object Object] has no method 'f'

Answer 1

From here:

Instead of this:

myLoader.item.f()

I was rather calling f() like this: myLoader.f()

Answer 2

You need to load a TabContainers instance in your current QML and call the function tabClicked() on it for it to work.

If your TabContainers instance is loaded in another QML file of your application you could also define a signal in one of their common ancestor and emit the signal in X.qml and catch it in TabContainers.qml using the Connections component.

If your TabContainers instance is loaded in a parent of where X.qml is loaded you could also reference the id of your TabContainers instance to call the function.

Example of the second solution

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);
    }
  }
}