ref 获取组件实例
收藏
我的收藏

基础库 2.33.0 开始支持本能力，低版本需做兼容处理，可使用 tt.canIUse('component.ref') 做兼容。

在需要调用自定义组件的方法或访问自定义组件数据时，可以使用 tt:ref 来获取自定义组件的实例。

使用方式

在开发者工具预览效果

ref 能力支持在页面及自定义组件中使用。

使用步骤

在 ttml 文件中，用 tt:ref 给自定义组件绑定一个方法名，例如绑定refHandler 方法。

被绑定的方法名需要在 ttml 对应的 js 文件中声明，该方法的参数就是该自定义组件实例。

代码示例 1：在页面中获取自定义组件实例

定义一个页面，在页面的 ttml 中使用 my-component 自定义组件，并通过 tt:ref 绑定一个方法名。

<!-- /page/index/index.ttml -->
<view> 
  <my-component tt:ref="refHandler" />
  <button bindtap="add">+</button>
</view>

// /pages/index/index.js
Page({ 
  counter: null,
  data: {},
  add() {
    this.counter.plus();
  }
  // refHandler 方法的参数 ref 为自定义组件实例，运行时由框架传递给 refHandler
  refHandler(ref) {
    // 存储自定义组件实例，方便以后调用
    this.counter = ref;
  },
});

定义my-component 自定义组件。

// /component/index/index.js
Component({
  data: {
    counter: 0,
  } 
  methods:{
    plus() {
      this.setData({ counter: this.data.counter + 1 });
    },
  },
});

预期效果：点击页面中的 “+” 按钮，触发 my-component 组件的 plus 方法，使得 my-component 组件的 counter 数据增加 1。

代码示例 2：自定义组件获取自定义组件实例

在一个名为 host 的自定义组件的 ttml 中使用 child-component 自定义组件，并通过 tt:ref 绑定一个方法名。

<!-- /component/host/index.ttml -->
<view> 
  <child-component tt:ref="refHandler"> </child-component>
  <button bindtap="onTap">+</button>
</view>

// /component/host/index.js
Component({
  methods: { 
    onTap() {
      this.counter.handleTap();
    },
    // refHandler 方法的参数 ref 为自定义组件实例，运行时由框架传递给 refHandler
    refHandler(ref) {
      this.counter = ref;
    },
  },
});

定义 child-component 自定义组件。

// /component/child/index.js 
Component({
  data: {
    counter: 0,
  }
  methods:{
    handleTap() {
      this.setData({ counter: this.data.counter + 1 })
    },
  },
});

预期效果：点击 host 组件中的 “+” 按钮，触发 child-component 组件的 handleTap 方法，使得 child-component 组件的 counter 值增加 1。

注意

•

tt:ref 绑定的方法会且仅会在与之绑定的自定义组件初始化时触发。

•

tt:ref 绑定的方法的参数 ref 为自定义组件实例，由框架传递给 refHandler 方法。

•

在 ttml 中对自定义组件使用 tt:ref 时，若绑定的是一个变量，如 tt:ref=“{{a}}”，那么变量 a 的初始值必须是 ttml 对应的页面或组件已经定义的方法名，否则被绑定方法在被绑定组件初始化时不会被触发，即使之后再将 a 修改成任何值也不会触发（建议 tt:ref 绑定的方法名仅使用字符串类型）。

ref 获取组件实例收藏我的收藏

​使用方式​

ref 获取组件实例
收藏
我的收藏

使用方式