| 微信小程序 组件与页面的传参、方法调用（二） | 您所在的位置：网站首页 › 小程序组件方法分析 › 微信小程序 组件与页面的传参、方法调用（二） |
微信小程序 组件与页面的传参、方法调用（二）
|
微信小程序 组件与页面的传参、方法调用
使用小程序组件时经常不会只用到静态页面显示，需要一定的交互。这时候就需要知道这么传参与方法调用的了 首先先放官方的文档，介绍的还是比较清楚详细，有能力的同学请直接阅读官方文档小程序组件官方文档 目录： 一、页面传递参数给组件 二、组件调用页面中的方法 三、组件传递参数回页面 一、页面传递参数给组件 1、第一步先在组件js中声明需要接受的变量名在 js页面中 properties 里面声明定义，我们定义了 btnText 用来接收 String类型的数据 注意：这个type 是接收数据的类型，要与页面传过来的内容类型一致（String、Object、Array、Boolean等） Component({ /** * 组件的属性列表 */ properties: { btnText: { type: String }, }, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: {} }) 2、第二步在组件 wxml 文件渲染该变量 {{btnText}} 3、第三步在页面 wxml文件 传递该变量的值在页面用 变量名="传递的值 " 这个格式进行传参 这里写了两个 作为效果对比 显示效果如下 有时候我们需要在组件中调用 页面中某一个方法，来达到我们需要的效果 要想从组件中调用页面的事件，我们需要一个组件的方法 triggerEvent 官方文档组件间通讯 1、第1步在组件页面定义需要回调的方法onTap是我们定义的组件的一个事件方法 {{btnText}} 调用页面的方法 2、第2步在组件js定义 触发的名称onTap方法写在methods中 this.triggerEvent(‘pageTap’) 意思是 使用组件时调用的方法名称 Component({ /** * 组件的属性列表 */ properties: { btnText: { type: String }, }, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: { // 组件调用页面的方法 onTap(){ this.triggerEvent('pageTap') } } }) 3、第3步页面使用组件时 声明需要回调的函数注意:bind: 后面带的值时组件里面triggerEvent的第一个参数也就是pageTap，= 号 后面是我们页面js对应的方法 我们这里调用的是页面的 onShow 方法 页面js的 onShow 方法 onShow(){ console.log("调用页面的onShow方法") }我们来看看打印的效果 ，这里我点击了4次 这个就是在调用页面中的方法基础上，加上我们需要传回来的值 1、第1步在组件页面定义需要回传参数的方法我们这边定义了 backDataTap这个方法 {{btnText}} 点击传值给页面 2、第2步在组件js写回传参数的方法这个是我们定义的一个方法，写在methods里面 回传参数需要用到triggerEvent方法 第1个值是页面调用组件方法时需要的名称 第2个值是需要回传的参数值 Component({ /** * 组件的属性列表 */ properties: { btnText: { type: String }, }, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: { // 组件传参回页面 backDataTap(){ this.triggerEvent('backDataTap', '组件传递的值') } } }) 3、第3步在使用组件的页面 声明我要用这个方法注意:bind: 后面带的值时组件里面triggerEvent的第一个参数也就是backDataTap，= 号 后面是我们页面js对应的方法 4、第4步在页面的js方法中或取到组件传过来的值我们这里的方法是getBackData 我们用e去接收传递过来的数据，detail就是我们所需要的值了 getBackData(e){ console.log(e.detail) }打印出来的效果 |
【本文地址】