如何修改,子組件中來(lái)自父頁(yè)面,傳遞進(jìn)來(lái)properties數(shù)據(jù)問(wèn)題?
在日常開(kāi)發(fā)中,相信經(jīng)常會(huì)有很多人遇到要自己手動(dòng)封裝一個(gè)彈窗的時(shí)候,這個(gè)彈窗需要由父組件來(lái)控制顯示,也就是從父組件傳遞一個(gè)變量 isHidden 進(jìn)子組件,子組件在 properties 中接受,
注意: 子組件的properties 一般都是單項(xiàng)數(shù)據(jù)流,子組件不能,修改來(lái)來(lái)自父組件的數(shù)據(jù),
這樣就有個(gè)問(wèn)題了,有時(shí)候,當(dāng)你想在子組件中 控制自身彈窗 的 顯示 和 隱藏 就沒(méi)辦法做到了,只能靠子組件向父組件通訊,利用時(shí)間triggerEvent來(lái)通知父組件修改 isHidden ,這樣就很麻煩了, 冗余了很多函數(shù);
沒(méi)辦法做到自身關(guān)閉自身
那么如何不用子父通訊來(lái)達(dá)到效果呢?
請(qǐng)看代碼:
// 父組件
page({
data:{
iShidden:false //傳遞給 子組件
}
}})
------------------------------------------------------
// 子組件
Component({
properties: {
iShidden: {
type: Boolean,
value: true, //true 就隱藏 false 就顯示
}
},
methods:{
//當(dāng)點(diǎn)擊關(guān)閉時(shí)
onTap:function(){
// 獲取頁(yè)面總棧
let pages = getCurrentPages();
//currPage 就是當(dāng)前的頁(yè)面,這樣就獲取到了當(dāng)前頁(yè)面的實(shí)例
let currPage = pages[pages.length - 1]; // [ page.length-1 ]是當(dāng)前頁(yè), [pages.length - 2]上一頁(yè), 以此類推
// 接下來(lái)就是騷操作的時(shí)候了
currPage.setData({ iShidden:true});
// 拿到頁(yè)面實(shí)例,就意味著,你可以在當(dāng)前頁(yè)面操作其他頁(yè)面的數(shù)據(jù), 調(diào)用函數(shù)等....
}
}
})
是不是覺(jué)得很騷呢?
有了這個(gè)方法,你甚至可以顛覆 以往 vue,小程序 中的 子父組件通訊的規(guī)則;
可以通過(guò) currPage 頁(yè)面實(shí)例,將子組件中的值, 給設(shè)置到任意其他頁(yè)面去, 再也不用通過(guò) triggerEvent去傳了
的確是很騷的一個(gè)操作, 不過(guò)像這種邪門(mén)歪道偶爾用用就好啦, 為啥?
從一開(kāi)始, 各類框架,各類狀態(tài)庫(kù),就強(qiáng)調(diào)了, 單向數(shù)據(jù)源的理念, vuex的統(tǒng)一數(shù)據(jù)源,有mutation , ,都是有一個(gè)單向數(shù)據(jù)流理念在, 如果沒(méi)有單向數(shù)據(jù),任何地方的修改,都會(huì)讓你的數(shù)據(jù)不穩(wěn)定,你不知道何時(shí)會(huì)被修改,導(dǎo)致各種 問(wèn)題 bug,
所以盡量減少使用這樣的方法setData
