qml里使用组件的案例

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick 2.7
import QtQuick.Layouts 1.3
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
 
 
 
    Component{
        id:com01
        Rectangle{
            id:rec01
            width: 15
            height:75
            color: "red"
            property int  age: 399
            signal deleteThis()
            Button{
                id:btn02
                text: "1"
                property int  age: 77
                width: 50
                y:5
                onClicked: {
                    rec01.deleteThis()
                }
 
                Button{
                    id:btn01   //刻意和全局某按钮id一样,并没有报冲突 说明component里面是一个黑盒子
                    x:150
                    //property int  age: 77
                    width: 50
                    height: 50
 
                    background: {
                        color:"red"
                    }
 
                    text: age   //这个age优先从本对象找 如果没找到就从根对象里面找
 
                    onClicked: {
                        console.log("99")
                        btn02.dada(); //不能简写dada(),明确指定调用的是btn02这个对象的dada方法
                        xxx() //xxx函数优先从本对象找 如果没找到就从根对象里面找
 
                    }
 
                    function jia02(a,b){
                        //打印结果  qml: componentt jia02 :154 : 1  :  961  : 0
                        console.log("componentt jia02 :"+(a+b)+ " : "+btn02.text+"  :  "+text+"  : "+y)
                    }
                    function xxx(){
                        console.log("xxx ...")
                    }
                }
 
                function dada(){
                    console.log("da da ...")
                }
 
            }
 
            function jia(a,b){
                console.log(a+b)
                btn01.jia02(88,66)
            }
 
 
        }
 
    }
    Loader{
        id:myloader01
        sourceComponent:com01
        function onDisDeleteThis() {
            myloader01.sourceComponent = undefined
        }
        onLoaded: {
            item.age = 325
            myloader01.item.deleteThis.connect(myloader01.onDisDeleteThis)
        }
    }
    Loader{
        x:250
        id:myloader02
        sourceComponent:com01
        function onDisDeleteThis() {
            myloader02.sourceComponent = undefined
        }
 
        onLoaded: {
            item.age = 311
            myloader02.item.deleteThis.connect(myloader02.onDisDeleteThis)
 
        }
 
    }
 
 
    Button{
        id:btn01
        x:100
        y:100
        text: "clickbtn"
 
        onClicked: {
            myloader01.item.color="orange"
            myloader01.item.age=169
            myloader02.item.color="green"
            myloader02.item.age=961
 
            myloader02.item.jia(78,25)
        }
 
    }
}

FR：徐海涛(hunkxu)