QML组件之间的通信方案（暴露子组件）

在项目里，经常有时候想让组件之间通信触发，但总是出现类似TypeError: Value is undefined等报错，下面写一下目前我使用的解决方案：

一、property alias

• 概念：即别名机制，可以将某一组件或属性暴露给外部调用

  • alia：本身就译为别名

• 特点：本质是引用绑定，为内部对象创建一个对外的引用接口

• 场景：目前我使用于暴露组件id，以供跨组件使用

• 举例：

  • 先在组件顶部使用property alias暴露子组件id

  //EnterPage.qml
  Rectangle{
      id:toenterRec
      //...
  
      property alias enterEmailTxtFld: emailTxtFld
      property alias enterPasswdTxtFld: passwdTxtFld
  
  	TextField{
          id:emailTxtFld
          //...
      }
  
  	TextField{
          id:passwdTxtFld
          //...
      }
  }

  • 然后再在需要通信的组件中创建出该组件的实例，就可以直接使用别名进行通信调用了

  //LoginPage.qml
  Rectangle{
      id:backRec
      //...
  	
  	MouseArea{
          z:0                          
          anchors.fill: parent
          onPressed: (mouse)=>{
                  toenterRec.enterEmailTxtFld.focus=false
                  toenterRec.enterPasswdTxtFld.focus=false
              }
          }
      }
  
  	EnterPage{
          id:toenterRec
          //...
  	}
  }

  • 我这边是用来实现点击背景取消所有的焦点事件，但其实后续废弃了，改成了直接封装函数使用

二、封装函数

在后续的开发中，我舍弃了别名的方案，改为了封装函数提供外部组件使用

在询问ai时，说是直接暴露组件对于封装性来说不太好，故改此方案

• 举例：

  • 在当前组件中封装好工具函数

  //EnterPage.qml
  Rectangle{
      id:toenterRec
      //...
  
      function clearFocus(){
          emailTxtFld.focus=false
          passwdTxtFld.focus=false
      }
  }

  • 在通信组件中创建好实例后，直接调用此函数

  //LoginPage.qml
  Rectangle{
      id:backRec
      //...
  
      MouseArea{
          z:0  
          anchors.fill: parent
          onPressed: (mouse)=>{
          		//...
          		
                  //调用函数
                  toenterRec.clearFocus()
              }
          }
      }
  }

三、结语

虽然最后看来property alias并没有发挥实质性作用，但也是实践学习路上的过程，也先暂且记录。

目前的方案肯定还不够完善，但也是当下用的顺手便捷的了，以供之后补充更新吧...