小程式開發之父組件向子組件傳遞資料
提要：此篇文章是在已經創建好自定義組件和當前頁面的前提下傳遞引數，僅僅涉及傳遞引數的部分，簡潔明了，對應的代碼做出相應的效果解釋
1.在購物車頁面car.js這個檔案中，存入資料：
// pages/car/car.js
Page({
data: {
tabs: [{
id: 0,
name: "首頁",
isActive: true
}, {
id: 1,
name: "原創",
isActive: false
}, {
id: 2,
name: "分類",
isActive: false
}, {
id: 3,
name: "關于",
isActive: false
}, ]
},
})
2.在car.wxml中使用已經自定義的組件標簽Tabs，并且系結tabs屬性和tabs值（這里的"{{tabs}}"就是tabs屬性的值，也就是上面data中的tabs陣列）：
<Tabs tabs="{{tabs}}"></Tabs>
3.在自定義的組件檔案Tabs.js中，宣告tabs的型別是一個陣列，value暫時為空
// components/Tabs/Tabs.js
Component({
/**
* 組件的屬性串列
*/
properties: {
tabs: {
type: Array,
value: []
}
},
/**
* 組件的初始資料
*/
data: {
}})
4.在Tabs.wxml檔案中，使用wx:for回圈，遍歷傳遞進來的tabs陣列，如下：
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive ? 'active' : '' }}"
bindtap="handleTapActive"
data-index="{{index}}">
{{item.name}}
</view>
</view>
其效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/258057.html
標籤：其他