1. 程式人生 > 實用技巧 >每日收穫3

每日收穫3

微信小程式元件的通訊:

父元件向子元件傳值:

元件:list元件和 item元件 他們都在component目錄下,
頁面:在和component同級路徑下我建立了index目錄,並將index頁面放在其中

我讓list元件為中間元件,也就是list元件是item的父元件,index頁面呼叫list元件

首先index頁使用list元件

在index頁面的index.json檔案中,新增引用程式碼如下

1 {
2    "usingComponents": {
3        "c-list":"../components/list/list"
4    }
5 }

在index.wxml中呼叫,頁面準備工作就完成了

然後在list.json中新增引用

1 {
2    "component": true,
3    "usingComponents": {
4       "c-item":"./item/item"
5    }
6 }

在list.wxml中呼叫

完成後要開始從list中向item中傳遞引數

我們現在list.js中定義data屬性

1 data:{
2    list:[
3       "vue",
4       "react"
5    ]
6 }

然後就可以引用到list.wxml

1 <view>
2     <c-item  title="{{item}}" wx:for
="{{list}}"/> 3 </view>

然後開啟item元件,在item.js中定義屬性

1 properties:{
2    title:{
3       type:String
4    }    
5 }

然後開啟item.wxml輸入

1 <view>
2    {{title}}
3 </view>

這就實現了父元件向子元件傳值

後面就是我自己的廢話了

————————————————————————————————————

因為基礎,又因為不長動手,今天的問題明天解決,以至於自己越來越落後,本該在昨天就應該熟練了元件,今天卻只弄懂得一點點,換種方式我還是一樣的不會。

問了也聽不懂,他們口中的“和xx類似”在我這裡卻又是一個新知識,開始後悔之前了,雖然現在努力還不晚,但是落在後面的感覺真的很不好受,那種與周圍格格不入的感覺啊。

發個牢騷,明天還是要過,繼續加油!!!沖沖衝!!!