开发
API

ref 获取组件实例

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

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

使用方式

在开发者工具预览效果

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

使用步骤

  1. 在 ttml 文件中,用 tt:ref自定义组件绑定一个方法名,例如 <my-component tt:ref="refHandler" /> 绑定refHandler 方法。
  2. 被绑定的方法名需要在 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 绑定的方法名仅使用字符串类型)。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助