微信小程序如何在页面调用组件内方法

小程序主要基于数据绑定来处理 js 和 wxml 之间的数据传输,虽然这样有很多便利性,但是有时候也是蛮不方便的。今天遇到调用组件方法的问题,其实非常简单,最关键是一个 selectComponent('#component-id'); 的方法问题,不想读太多文字可以直接下载源码。下面是完整记录。

创建组件

新建一个叫做 my-component 的组件,并在组件 my-component.js 的 methods 块里增加 myFunction 方法,也就是一会儿我们想尝试用页面直接调用的方法。组件的其他内容,按照需要的逻辑自己添加就好了。

Component({
    properties: {

    },
    data: {

    },
    methods: {
        myFunction: function(){
            console.log('I am myFunction');
        }
    }
})
微信代码片段的目录结构

页面调用组件

index.json里添加组件:

{
    "usingComponents": {
        "my-component": "./my-component"
    }
}

index.wxml页面头部引用组件:

<import src="./my-component.wxml" />

wxml文件里调用组件,并设置组件的 id:

<my-component id="component-id"></my-component>

id 是页面调用的关键!

index.js里根据组件的 id 获取组件实例,这样就可以调用任何组件里的任何写在 methods 块里的方法了:

const component = this.selectComponent('#component-id');
component.myFunction();

我这里是在 index.wxml 里添加了个按钮:

<button bindtap='callComponentMethod'>点我调用组件内部方法</button>

又在 index.js 页面里增加了回调方法,里面去调用 component 的方法

callComponentMethod: function(evt){
    const component = this.selectComponent('#component-id');
    component.myFunction();
}

结果如下:

控制台输出说明调用成功

Github 代码片段下载地址

Crates.io Github