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
绑定的方法名仅使用字符串类型)。
点击纠错