一、頁面與組件通信
1.頁面?zhèn)鬟f內(nèi)容給組件
page為頁面的屬性名
components 為組件的外部屬性名, 用properties對象接收
頁面
<!-- Wxml -->
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
data: {
page: '父親pages'
}
})
組件
'父親pages'
<!-- Wxml -->
<!-- Js -->
Component({
/**
* 組件的屬性列表
*/
properties: {
components: { // 屬性名
type: String
}
},
/**
* 組件的方法列表
*/
methods: {
onTap: function () {
let page = this.data.components
console.log(page) // 我是父親pages
}
}
})
2.組件傳遞內(nèi)容給頁面
給組件設(shè)置myevent事件坏逢，通過this.triggerEvent('myevent', myEventDetail) 觸發(fā)該myevent事件并傳遞內(nèi)容蓖捶，在頁面用onMyEventshi事件監(jiān)聽傳遞過來的數(shù)據(jù)绊谭。
頁面
<!-- Wxml -->
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
// 監(jiān)聽myevent事件
onMyEvent: function (e) {
console.log('接收a組件傳遞的內(nèi)容:', e.detail) // '我是a組件'
}
})
組件
<!-- Wxml -->
<!-- 在自定義組件"components-a"中 -->
<button bindtap="onTap">點擊</button>
<!-- Js -->
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = '我是a組件'
this.triggerEvent('myevent', myEventDetail) // 觸發(fā)組件上的“myevent”事件
}
}
})
二伏伐、組件與組件通信
1.兩個無任何關(guān)聯(lián)的組件：通過全局變量或本地緩存?zhèn)鬟f數(shù)據(jù)桩警；
2.兩個有關(guān)聯(lián)的組件(同一個父頁面下)： 通過組件 => 頁面 => 組件的方式傳遞數(shù)據(jù)
三炒瘸、頁面之間的通信
1.使用全局變量 app.globalData
2.使用本地緩存 wx.setStorageSync
3.url傳遞
// A頁面-傳遞數(shù)據(jù)
// 需要注意的是捞慌，wx.switchTab 中的 url 不能傳參數(shù)耀鸦。
wx.navigateTo({
url: '../pageD/pageD?name=raymond&gender=male'
})
// B頁面-接收數(shù)據(jù)
// 通過onLoad的option
<!-- JS -->
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender) // raymond is male
this.setData({
option: option
})
}
})
4.后一級頁面對前一級頁面的數(shù)據(jù)的管理(通過獲取到頁面對象進行數(shù)據(jù)操作)
這個方法的精髓，是通過獲取到其他頁面的對象原型啸澡，然后通過原型方法 setData 對當前對象管理的 data 進行修改袖订，
示例如下：
// pageE.js
Page({
data: {
index: 1
}
})
當跳轉(zhuǎn)到下一個頁面 F 之后，假定在 F 中有操作需要對 E 中的數(shù)據(jù)有修改嗅虏，則可以使用以下方法：
// pageF.js
...
Page({
changeIndexInE: function(){
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
index: 0
})
}
})
這個方法可以操作頁面堆棧里面的頁面的數(shù)據(jù)洛姑，可以做到讓后一級頁面對上級頁面群的數(shù)據(jù)管理。
四皮服、頁面與模板之間的通信
頁面
<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
<!-- JS -->
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
傳入模板的除了變量楞艾，還可以是事件方法對象。例如冰更，模板中的點擊事件产徊，可以傳遞到使用模板的元素中。
