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

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

一、property alias

• 概念：即别名机制，可以将某一组件或属性暴露给外部调用
  • alia：本身就译为别名
• 特点：本质是引用绑定，为内部对象创建一个对外的引用接口
• 场景：目前我使用于暴露组件id，以供跨组件使用
• 举例：
  • 先在组件顶部使用property alias暴露子组件id

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

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

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

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

二、封装函数

在后续的开发中，我舍弃了别名的方案，改为了封装函数提供外部组件使用
在询问ai时，说是直接暴露组件对于封装性来说不太好，故改此方案

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

  //EnterPage.qmlRectangle{id:toenterRec//...functionclearFocus(){emailTxtFld.focus=false passwdTxtFld.focus=false}}

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

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

三、结语

虽然最后看来property alias并没有发挥实质性作用，但也是实践学习路上的过程，也先暂且记录。
目前的方案肯定还不够完善，但也是当下用的顺手便捷的了，以供之后补充更新吧…