微信小程序获取自定义元素的宽高、使用”事件穿透”来达到状态同步的效果

微信小程序获取元素宽高的方式：

// 自定义组件需要用：this.createSelectorQuery()
const query = wx.createSelectorQuery()
query.select('.my-class').boundingClientRect(res => {
	this.setData({
		itemHeight: res.height,
		itemWidth: res.width
	})
}).exec()

这里需要注意一下：

• 如果是自定义组件或包含自定义组件的页面中，应该使用this.createSelectorQuery()替代！！！
• 这个高度是以px为单位的！！！

借此地补充一下触发自定义事件一个很有用的配置：

this.triggerEvent('myevent', myEventDetail, myEventOption)

triggerEvent()的第三个配置项myEventOption中有一个composed的属性，将该属性设为true（同时将事件设为冒泡，即bubbles也为true），此时事件即有了“穿透”的能力（穿越组件边界），我们就可以愉快地在各层级上监听到事件了，这对于并列的多个自定义组件需要同步更新状态的场景特别有用。我们只要在根节点处监听事件，做出响应，然后分发给子组件即可。

举个例子：如下购物车页面，组件A和组件B是并列的（它们同属于购物车页面）。组件B的数据状态受组件A的影响，比如是否选中商品以及增减商品数量等都会影响到组件B的统计数据；而组件A的选中状态也受组件B的全选状态的影响。这时，我们只要抽象出一个处理状态变更的函数update()，然后在组件A和组件B状态发生变化时，触发同一个自定义事件，然后再在购物车的根页面绑定事件处理函数（监听子组件状态的变更），执行update()，然后再将最新的数据状态下发到子组件渲染即可保持状态同步。

官方文档链接：

• SelectorQuery
• 组件间通信与事件