1. 程式人生 > >微信小程式學習筆記三(持續更新)---小程式元件通訊

微信小程式學習筆記三(持續更新)---小程式元件通訊

參照這裡
這裡將重要的點貼一下:

一、專案目錄結構

在專案同級目錄新建components資料夾,新建component會生成wxml,wxss,js,json檔案。將所有的公共元件都寫在此資料夾下。

二、元件引入和使用

我們的所有頁面一般寫在pages目錄下,每個頁面有wxml,wxss,js,json四個檔案,在需要使用元件的頁面.json檔案中,引入

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

在.wxml中使用

<view>
    <view>微信小程式元件傳參</view>
    <componentA />
</view>

三、子元件觸發父元件事件

父元件.wxml:
<component bind:myevent="onMyEvent"/>
使用bind:自定義觸發事件
父元件.js

onMyEvent:function(e){
      // 事件處理,比如對data賦值操作
}

子元件.js
this.triggerEvent('myevent') // 觸發父元件方法
若要傳值:
子元件.js
this.triggerEvent('myevent', {key: value}) // 傳值
父元件:

onMyEvent:function(e){
      e.detail.key // 獲取到傳過來的值
}

四、父元件向子元件傳值

父元件.wxml
<component key="{{value}}"/>

data: {
	value: '1111'
}

key為子元件中 properties自定義的值,value為父元件中data定義的值
子元件.js

	properties: {
	    key: {
	      type: String
	    }
  },

子元件.wxml
<view>{{key}}</view>