微信小程序组件间通讯

前言

Anjular的路由出口真是方便的很,组件共用轻轻松松,可是小程序却没有这样的概念,至今也没有找到相似的功能的实现方法,项目中的左侧导航栏就是共用的,位置固定,页面变化只改变导航栏右侧界面,目前只得使用wx:if判断显示哪一个界面,若是咱们把导航栏组件引入别的界面,要想点击后调用方法,就要用到组件间通讯,不然不管如何界面也不会发生改变.

实现

组件应用

首先对导航栏组件进行封装:
在leftNav组件json文件夹里添加代码:

"component": true

用以代表是自定义组件.
而后在index.json里面声明引入该组件:

{
"component" : true,
"usingComponents": {
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"leftNav":"../leftNav/leftNav",
"orderList": "../orderList/orderList",
"listDetails": "../listDetails/listDetails"
      }
}

这样就能够在index.wxml里面应用该组件了:

<van-col span="6"\>
<leftNav>
</leftNav>
</van-col>

组件通讯

要想实现对界面的控制,还要连通组件间的通讯,
在控制跳转的位置添加事件 orderList(leftNav.wxml):

<van-sidebar-item class="menu" bindtap="orderList" title="订单列表" \>

具体方法以下(leftNav.ts):

orderList(){
this.triggerEvent('leftNavEvent', {menu: "orderList"})
}

triggerEvent应用于自定义组件触发事件,表示向leftNavEvent 节点对象传入: {menu: "orderList"}
经过自定义事件的方式通知父组件,那么信息的发送就实现了,接下来就是要让父组件接收信息(index.wxml):

<van-col span="6">
<leftNav bind:leftNavEvent="onGetMenu">
</leftNav>
</van-col>

首先要链接到leftNavEvent,当监听到子组件触发事件时,调用方法onGetMenu(index.ts):

Page({
data: {
menu: ""
},
onGetMenu(e: any) {
const menuValue = e.detail.menu
this.setData({ menu: menuValue })
}
});

打印一下参数e的值:

{type: "leftNavEvent", timeStamp: 8233, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: undefined
currentTarget: {id: "", dataset: {…}}
detail: {menu: "orderList"}
mark: {}
mut: false
target: {id: "", dataset: {…}}
timeStamp: 8233
touches: undefined
type: "leftNavEvent"
_requireActive: undefined
__proto__: Object

咱们发现以前传出的值{menu: "orderList"} 在detail属性里,这样就获取到传出的值了,而后用传过来的值对menu进行赋值,经过判断menu在V层的值控制界面的显示:

<view>
<van-row>
<van-col span="6">
<leftNav bind:leftNavEvent="onGetMenu">
</leftNav>
</van-col>
<van-col span="18">
<block wx:if = "{{menu == 'orderList'}}">
<orderList bind:orderListEvent="onGetMenu"></orderList>
</block>
<block wx:elif="{{menu == 'listDetails'}}">
<listDetails></listDetails>
</block>
</van-col>
</van-row>
</view>

这样一来就达到了组件共用的相似Anjular路由出口的效果:

缺点就是在点击返回时老是返回初始界面,而非上一级界面,后期会改进的.

具体的过程缩略以下:

总结

感受微信小程序的一些功能挺繁琐的,官方给的代码也不是很完美,好在官方给的有示例,一些用法还不是很熟悉,有时候用到一些方法都不知道是官方给的,看官方文档仍是颇有必要的.

本文做者：河北工业大学梦云智开发团队 张文达