如何修改,子組件中來(lái)自父頁(yè)面,傳遞進(jìn)來(lái)properties數(shù)據(jù)問(wèn)題?

在日常開發(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ò)像這種邪門歪道偶爾用用就好啦, 為啥?

從一開始, 各類框架,各類狀態(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