更新时间:2022-08-10 14:09:04贡献者收藏订阅更新我的文档设置返回文档基础框架 1.18.0 起支持定义和获取自定义组件的对外实例。自定义组件 ref 定义段自定义组件可在选项中配置一个 ref 方法,该方法的返回值将作为该自定义组件的对外引用实例。配置 ref 后,支持小程序宿主、小程序插件互相获取对方的自定义组件对外实例。javascript复制代码9912345678910111213141516// components/index/index.jscomponent({ ref() { return { plus: () => this.handleplus() }; }, data: { counter: 0, }, methods: { handleplus() { this.setdata({ counter: this.data.counter 1 }) }, },});如未定义此方法,尝试引用该自定义组件的对外实例时,同属于一个小程序宿主或者小程序插件的其他自定义组件或页面会获得该自定义组件的 this,否则获得 null。创建后 ref 回调如果小程序项目开启了 component2,就可以在 axml 中给自定义组件定义 ref 回调。当被引用的自定义组件创建后,将自动触发该回调。对于未开启 component2 的场景请使用 my.caniuse('component2') 做兼容。991234567891011// /pages/index/index.jspage({ handleplus() { this.counterref.plus(); }, // 参数 ref 为自定义组件实例的对外引用 handleref(ref) { // 存储自定义组件实例,方便以后调用 this.counterref = ref; }});9123<my-component ref="handleref" /><button ontap="handleplus"> button>自定义组件选择方法自定义组件可以通过 this.selectownercomponent、this.selectcomposedparentcomponent 等方法获取其创建者自定义组件、事件路径父自定义组件时,返回相关父组件的实例结果与 ref 回调相同。假设某页面结构如下:9912345678910<my-a> <my-b />my-a><view><slot>slot>view><view><my-c />view>在各组件中调用各方法的结果是:javascript复制代码99123456789101112131415161718192021222324252627282930313233343536// pages/index/index.jspage({})// my-a.jscomponent({ ref() { return { getmessage: () => 'i am a', }; }, didmount() { // 被定义在页面的 .axml 中 console.log(this.selectownercomponent() === this.$page); // true // 在事件路径上页面是 的父节点 console.log(this.selectcomposedparentcomponent() === this.selectownercomponent()); // true }})// my-b.jscomponent({ ref() { return { getmessage: () => 'i am b', }; }, didmount() { // 被定义在页面的 .axml 中 console.log(this.selectownercomponent() === this.$page); // true // 作为默认插槽提供给了 // 在事件路径上 是 的父节点 console.log(this.selectcomposedparentcomponent().getmessage()); // "i am a" }})// my-c.jscomponent({