微信小程序自定义组件-组件间通信与事件

组件间通信

组件间的基本通信方式有以下三种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

---

WXML数据绑定 - 父传子

<！-- 组件 my-component.wxml–>
组件内部的标签

<view>
  {{sayHello}}
  <slot>slot>
view>

// 组件 my-component.js
这里定义一个属性sayHello 它是一个String 类型，父级页面可以通过它给子组件传入值

// components/my-component/my-component.js

  properties: {
    sayHello: String
  }

---

// 页面 index.json
在需要使用组件的页面引入组件 这项是必须的 。这里的my-component名字可以自己定义

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

//页面 index.js

  data: {
    hello: 'hello world!'
  },

<！-- 页面 index.wxml–>
在使用组件的页面中 可以调用组件中定义的属性 sayHello,并传值给组件内部

<!--pages/index/index.wxml-->

<!--  WXML数据绑定-父传子 -->
<!-- 组件中properties里是以小驼峰的方式定义sayHello属性 那么在使用组件时传入的属性可以使用横杠的方式分开 -->
<my-component say-hello="{{hello}}"></my-component>

<!-- 也可以不用使用横杠分开 -->
<my-component sayHello="{{hello}}"></my-component>

展示结果：

---

事件的方式：子传父

<！-- 组件 my-component.wxml–>
组件内部的标签

<button bindtap="sendData" type="default">子传父button>

//组件 my-component.js
触发事件: 自定义组件触发事件时，需要使用 triggerEvent
方法，指定事件名、detail对象和事件选项

// components/my-component/my-component.js

   /**
   * 组件的方法列表
   */
  methods: {
    sendData(){
      // 向父组件传递 - 触发回调
      // 用到的方法： this.triggerEvent
      // 它有三个参数： 
      // 1 映射到父组件页面的方法名
      // 2 可以传给父组件的参数列表
      // 3 触发事件的选项 涉及到组件间事件的捕获和冒泡
      var myEventDetail = {name:'小张',city: '深圳'} // detail对象，提供给事件监听函数
      this.triggerEvent("fatherEvent", myEventDetail,{})
    }
  }

第三个参数（ 触发事件的选项）可以参考：小程序官方文档

---

// 页面 index.json
在需要使用组件的页面引入组件 这项是必须的 。这里的my-component名字可以自己定义

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

<！-- 页面 index.wxml–>
监听事件： bind:fatherEvent 还可以 这样写bindfatherEvent

<!--pages/index/index.wxml-->

<my-component bind:fatherEvent="onMyEvent"></my-component>

//页面 index.js
父组件接收到子组件传递的数据

  onMyEvent(e){
    console.log('父组件接收到数据了', e.detail) // 父组件接收到数据了 {name: "小张", city: "深圳"}
  },

---

this.selectComponent 方法获取子组件实例对象

1 首先给调用的子组件起个id名字。
2 在父组件里获取子组件的实例。
3 在父组件中使用事件触发的方式获取子组件的方法属性

//组件 my-component.js

// components/my-component/my-component.js

   /**
   * 组件的方法列表
   */
  methods: {
    innerHandler(){
      console.log('子组件的方法')
    }
  }

<！-- 页面 index.wxml–>
1 首先给调用的子组件起个id名字。

<!--pages/index/index.wxml-->

<my-component id="myComponent">
  <button bindtap="getMyCom">点我调用子组件里的方法</button>
</my-component>

//页面 index.js
2 在父组件里获取子组件的实例。 3 在父组件中使用事件触发的方式获取子组件的方法属性

   getMyCom(){
    this.myComponentObj.innerHandler() // 子组件的方法被调用了
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 一般在onReady中获取子组件的实例
    this.myComponentObj = this.selectComponent('#myComponent')
  },

---