微信小程序 组件与页面的传参、方法调用（二）

微信小程序 组件与页面的传参、方法调用

使用小程序组件时经常不会只用到静态页面显示，需要一定的交互。这时候就需要知道这么传参与方法调用的了
首先先放官方的文档，介绍的还是比较清楚详细，有能力的同学请直接阅读官方文档小程序组件官方文档
目录：
一、页面传递参数给组件
二、组件调用页面中的方法
三、组件传递参数回页面

一、页面传递参数给组件

1、第一步先在组件js中声明需要接受的变量名

在 js页面中 properties 里面声明定义，我们定义了 btnText 用来接收 String类型的数据
注意：这个type 是接收数据的类型，要与页面传过来的内容类型一致（String、Object、Array、Boolean等）

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btnText: { type: String }, 
  },
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {}
})

2、第二步在组件 wxml 文件渲染该变量

<view class="jw-title-box">{{btnText}}</view>

3、第三步在页面 wxml文件 传递该变量的值

在页面用 变量名="传递的值 " 这个格式进行传参
这里写了两个 作为效果对比

<jw-title btnText="页面传递过来的值"></jw-title>
<jw-title></jw-title>

显示效果如下

二、组件调用页面中的方法

有时候我们需要在组件中调用 页面中某一个方法，来达到我们需要的效果
要想从组件中调用页面的事件，我们需要一个组件的方法
triggerEvent 官方文档组件间通讯

1、第1步在组件页面定义需要回调的方法

onTap是我们定义的组件的一个事件方法

<view class="jw-title-box">{{btnText}}</view>
<button bindtap="onTap" class="jw-btn">调用页面的方法</button>

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 方法

<jw-title btnText="页面数据" bind:pageTap="onShow"></jw-title>

页面js的 onShow 方法

  onShow(){
    console.log("调用页面的onShow方法")
  }

我们来看看打印的效果 ，这里我点击了4次

三、组件传递参数回页面

这个就是在调用页面中的方法基础上，加上我们需要传回来的值

1、第1步在组件页面定义需要回传参数的方法

我们这边定义了 backDataTap这个方法

<view class="jw-title-box">{{btnText}}</view>
<button bindtap="backDataTap" class="jw-btn">点击传值给页面</button>

2、第2步在组件js写回传参数的方法

这个是我们定义的一个方法，写在methods里面
回传参数需要用到triggerEvent方法
第1个值是页面调用组件方法时需要的名称
第2个值是需要回传的参数值

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btnText: { type: String }, 
  },
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {
    // 组件传参回页面
    backDataTap(){
      this.triggerEvent('backDataTap', '组件传递的值')
    }
  }
})

3、第3步在使用组件的页面 声明我要用这个方法

注意:bind: 后面带的值时组件里面triggerEvent的第一个参数也就是backDataTap，= 号 后面是我们页面js对应的方法

<jw-title btnText="页面传递过来的值" bind:backDataTap="getBackData"></jw-title>

4、第4步在页面的js方法中或取到组件传过来的值

我们这里的方法是getBackData

我们用e去接收传递过来的数据，detail就是我们所需要的值了

 getBackData(e){
    console.log(e.detail)
  }

打印出来的效果