Qml中信号的发送与接收信号槽函数的使用

        在Qt/C++中，发送信号的函数和对应的槽函数在参数顺序、类型方面必须保持一致，此外，要让一个信号发射后进入相应的槽函数，必须用connect进行连接，这样，信号和槽才能连接起来。在QML中，发送信号和接受信号的槽，用起来比Qt/C++还更方便，用法如下：
1. 定义信号： signal sigFunc(type param)进行定义
2. 发送时信号：emit: sigFunc(parameter);

3. 接受信号的槽：onSigFunc: { //...; //接收发送过来的参数时，直接用信号定义时的形参param即可 }

例子：
ImageItem.qml文件如下：

import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Rectangle {
    id: rect
    border.color: "red"
    width: 150
    height:150
    signal testClicked(color colParam);	//该文件中发送带参信号

    Image {
        id:img
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        source:"12345.jpg"
    }

    MouseArea {
        id: big_mouse
        anchors.fill: parent
        property point clickPos: "0,0"

        onPressed: {
            clickPos = Qt.point(mouse.x,mouse.y)
            console.log("onPressed:", mouse.x,mouse.y)

            emit: testClicked("red");	//发送带参的信号
        }
        onPositionChanged: {
            var deltdata = Qt.point(mouseX-clickPos.x, mouseY-clickPos.y);
            rect.x += deltdata.x
            rect.y += deltdata.y
        }
    }
}

ImageTest.qml文件如下：

import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    id: win
    visible: true
    property string windowBgColor: "white"

    width: 300
    height:300
    x:100
    y:100

    MouseArea {
        anchors.fill: parent

        onWheel: {
            if (wheel.angleDelta.y > 0) {
                rect.width += 5;
                rect.x -= 2

                rect.height += 5;
                rect.y -= 2
            }
            else {
                rect.width -= 5;
                rect.x += 2

                rect.height -= 5;
                rect.y += 2
            }
        }
    }
    ImageItem {
        id: rect
        onTestClicked: {	//响应signal testClicked(color colParam);信号
            console.log("emit parameter", colParam);
            rect.color = colParam;	//运用时，直接用形参名即可
        }
    }
}

以上代码，在ImageItem中当点击时发送信号testClicked并携带一个参数color，在ImageTest中接收该信号，并运用携带的color参数改变了北背景颜色，以上qml可以直接运行试看效果。