如(rú)何修改,子(zǐ)組件中(zhōng)來自父頁面,傳遞進來properties數據問(wèn)題?

在日常開發中(zhōng),相信經常會有很多人遇到要自己手動(dòng)封裝一個(gè)彈窗的時候,這個(gè)彈窗需要由父組件來控制顯示,也就是從父組件傳遞一個(gè)變量 isHidden 進子(zǐ)組件,子(zǐ)組件在 properties 中(zhōng)接受,
注意: 子(zǐ)組件的properties 一般都是單項數據流,子(zǐ)組件不能,修改來來自父組件的數據,

這樣就有個(gè)問(wèn)題了,有時候,當你(nǐ)想在子(zǐ)組件中(zhōng) 控制自身彈窗 的 顯示 和(hé) 隐藏 就沒辦法做到了,隻能靠子(zǐ)組件向父組件通(tōng)訊,利用時間triggerEvent來通(tōng)知父組件修改 isHidden ,這樣就很麻煩了, 冗餘了很多函數;

沒辦法做到自身關(guān)閉自身

那麼如(rú)何不用子(zǐ)父通(tōng)訊來達到效果呢(ne)?
請看代碼:

//  父組件
page({
 data:{
       iShidden:false  //傳遞給 子(zǐ)組件
  }
}})
------------------------------------------------------
// 子(zǐ)組件
Component({
  properties: {
    iShidden: {
      type: Boolean,
      value: true, //true 就隐藏 false 就顯示
    }
  },
  methods:{
      //當點擊關(guān)閉時
      onTap:function(){
       // 獲取頁面總棧
        let pages = getCurrentPages();
         //currPage 就是當前的頁面,這樣就獲取到了當前頁面的實例   
        let currPage  = pages[pages.length - 1];  //    [  page.length-1 ]是當前頁,  [pages.length - 2]上一頁, 以此類推
       // 接下(xià)來就是騷操作的時候了
          currPage.setData({ iShidden:true});
         // 拿到頁面實例,就意味着,你(nǐ)可(kě)以在當前頁面操作其他頁面的數據, 調用函數等....
      }
  }
})

是不是覺得很騷呢(ne)?
有了這個(gè)方法,你(nǐ)甚至可(kě)以颠覆 以往 vue,小程序 中(zhōng)的 子(zǐ)父組件通(tōng)訊的規則;
可(kě)以通(tōng)過 currPage 頁面實例,将子(zǐ)組件中(zhōng)的值, 給設置到任意其他頁面去, 再也不用通(tōng)過 triggerEvent去傳了

的确是很騷的一個(gè)操作, 不過像這種邪門歪道偶爾用用就好啦, 為啥?

從一開始, 各類框架,各類狀态庫,就強調了, 單向數據源的理念, vuex的統一數據源,有mutation , ,都是有一個(gè)單向數據流理念在, 如(rú)果沒有單向數據,任何地方的修改,都會讓你(nǐ)的數據不穩定,你(nǐ)不知道何時會被修改,導緻各種 問(wèn)題 bug,

所以盡量減少(shǎo)使用這樣的方法setData