微信小程序組件間通訊

前言

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路由出口的效果:

缺點就是在點擊返回時老是返回初始界面,而非上一級界面,後期會改進的.

具體的過程縮略以下:

總結

感受微信小程序的一些功能挺繁瑣的,官方給的代碼也不是很完美,好在官方給的有示例,一些用法還不是很熟悉,有時候用到一些方法都不知道是官方給的,看官方文檔仍是頗有必要的.

本文做者：河北工業大學夢雲智開發團隊 張文達