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

基础库 2.33.0 开始支持本能力,低版本需做 兼容处理,可使用 tt.canIUse('component.ref') 做兼容。​
在需要调用自定义组件的方法或访问自定义组件数据时,可以使用 tt:ref 来获取自定义组件的实例。​

使用方式​

ref 能力支持在页面及自定义组件中使用。​
使用步骤
    1.在 ttml 文件中,用 tt:ref 给自定义组件绑定一个方法名,例如 绑定refHandler 方法。​
    2.被绑定的方法名需要在 ttml 对应的 js 文件中声明,该方法的参数就是该自定义组件实例。​
代码示例 1:在页面中获取自定义组件实例
定义一个页面,在页面的 ttml 中使用 my-component 自定义组件,并通过 tt:ref 绑定一个方法名。​
html
复制
<!-- /page/index/index.ttml -->
<view>
<my-component tt:ref="refHandler" />
<button bindtap="add">+</button>
</view>
js
复制
// /pages/index/index.js
Page({
counter: null,
data: {},
add() {
this.counter.plus();
}
// refHandler 方法的参数 ref 为自定义组件实例,运行时由框架传递给 refHandler
refHandler(ref) {
// 存储自定义组件实例,方便以后调用
this.counter = ref;
},
});
定义my-component 自定义组件。​
js
复制
// /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 绑定一个方法名。​
html
复制
<!-- /component/host/index.ttml -->
<view>
<child-component tt:ref="refHandler"> </child-component>
<button bindtap="onTap">+</button>
</view>
js
复制
// /component/host/index.js
Component({
methods: {
onTap() {
this.counter.handleTap();
},
// refHandler 方法的参数 ref 为自定义组件实例,运行时由框架传递给 refHandler
refHandler(ref) {
this.counter = ref;
},
},
});
定义 child-component 自定义组件。​
js
复制
// /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 绑定的方法名仅使用字符串类型)。​