wx小程序-vue中ref的类似方法

文章参考

1. WXS响应事件
2. 小程序 自定义组件

问题描述

自己写了一个表单组件，界面完全符合要求，但是，当用户输入完成了之后，如何将用户输入的表单数据返回出来呢？自己想了两种方案：

1. 用户每次输入表单，对外暴露一个事件，将组件的所有数据全部暴露出来
2. 利用Vue中 ref 的思想，找到组件的引用对象，然后访问组件内部的数据

由于表单内部数据比较多，觉得每次暴露所有的数据，比较麻烦，因此考虑到了ref引用的办法，但是没有在文档中找到ref相关的东西，但是自己发现用uni-app 是支持这种办法的，因此，确信微信一定有ref类似的方法，只是表现形式不是 ref

解决办法 selectComponent 和 selectAllComponents

|方法名|参数|描述|
|setData|Object newData|设置data并执行视图层渲染|
|hasBehavior|Object behavior|检查组件是否具有 behavior （检查时会递归检查被直接或间接引入的所有behavior）|
|triggerEvent|String name, Object detail, Object options|触发事件，参见 组件事件|
|createSelectorQuery| |创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内|
|selectComponent|String selector|使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象|
|selectAllComponents|String selector|使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组|
|getRelationNodes|String relationKey|获取所有这个关系对应的所有关联节点，参见 组件间关系|

案例说明

1. 给子组件添加一个id属性，方便查找

<view>
  <first-component id="mycomp"/>
view>

2. 通过this.selectComponent方法查找子组件

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log(this);
	// 获取子组件的数据
    console.log(this.selectComponent("#mycomp").data);
	// 调用子组件的方法
    this.selectComponent("#mycomp").huanghaili()
    debugger
  }
})

调用子组件方法 this.selectComponent("#mycomp").huanghaili()
查找子组件的属性 this.selectComponent("#mycomp").data

3. 子组件定义的逻辑

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    msg: 'i am msg'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    huanghaili: function () {
      console.log("huanghaili")
    }
  }
})