uniapp 小程序中 uni.createselectorquery().in 如何获取当前页面引入的组件

在uniapp小程序开发中，使用uni.createSelectorQuery().in()方法时遇到问题：如何正确获取当前页面引入的组件实例？我尝试过.in(this)但只能获取页面元素，对于页面内引入的自定义组件无法选取其内部节点。请问应该如何设置.in()的参数才能查询组件内的元素？是否需要特殊写法或注意组件生命周期？

2 回复

在uniapp中，使用uni.createSelectorQuery().in(this)获取当前页面组件。this指向当前页面实例，可查询页面内所有组件节点。


在 UniApp 小程序中，uni.createSelectorQuery().in() 方法用于获取当前页面引入的组件的节点信息。以下是详细说明和示例：

方法说明

  • uni.createSelectorQuery()：创建选择器查询实例。
  • .in(component)：指定查询范围在当前页面引入的组件内。参数 component 是组件的实例对象，通常通过 this.selectComponent() 获取。

使用步骤

  1. 获取组件实例：在页面中通过 this.selectComponent() 获取目标组件的实例。
  2. 调用查询方法：使用 .in(component) 将查询范围限定到该组件内。
  3. 执行查询：调用 .select() 等方法选择节点，并通过 .boundingClientRect() 等获取信息。

示例代码

假设页面中引入了自定义组件 <my-component>，并需要获取其内部的某个节点信息：

// 在页面的 .vue 文件中
export default {
  methods: {
    getComponentNode() {
      // 1. 获取组件实例（假设组件的 ref="myComp"）
      const componentInstance = this.selectComponent('#myComp'); // 使用 ref 或选择器
      
      // 2. 创建查询并指定范围到组件
      const query = uni.createSelectorQuery().in(componentInstance);
      
      // 3. 查询组件内的特定节点（例如类名为 .target-element 的元素）
      query.select('.target-element').boundingClientRect(data => {
        if (data) {
          console.log('节点信息:', data); // 输出节点位置、尺寸等
        } else {
          console.error('未找到节点');
        }
      }).exec();
    }
  }
}

注意事项

  • 组件必须已渲染：确保组件在页面中已加载完成，通常在 onReady 或按钮事件中调用。
  • 正确获取实例：this.selectComponent() 需传入组件的选择器（如 ref 名称），确保引用正确。
  • 节点作用域：.in() 将查询限制在组件内，避免与其他页面节点冲突。

通过以上方法，即可准确获取当前页面引入的组件内部节点信息。

回到顶部