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