摘要：在父組件使用方法父組件模擬異步數(shù)據(jù)異步的數(shù)據(jù)子組件使用來(lái)監(jiān)聽(tīng)父組件改變的，使用來(lái)代替既然只會(huì)執(zhí)行一次，但是又想監(jiān)聽(tīng)改變的值做其他事情的話(huà)，可使用這個(gè)方法。

我一直都相信，決定未來(lái)的是自信與成長(zhǎng)速度，成長(zhǎng)的過(guò)程中，整理是一個(gè)非常重要的環(huán)節(jié)，接下來(lái)是我整理的系統(tǒng)組件開(kāi)發(fā)常用的部分。

本文的主要內(nèi)容有：

1.table內(nèi)編輯 
2.高度不固定，顯示隱藏過(guò)渡動(dòng)畫(huà)
3.解決vue父組件傳遞props異步數(shù)據(jù)到子組件的問(wèn)題

需求：

1.table點(diǎn)擊編輯按鈕時(shí)，顯示input（此input可修改table里某一行某一列的內(nèi)容）、取消按鈕、保存按鈕。
2.點(diǎn)擊保存按鈕，則保存編輯后的內(nèi)容，點(diǎn)擊取消則不保存。

思路：
1.點(diǎn)擊編輯時(shí)編輯按鈕隱藏，保存和取消顯示?？墒褂?set,在每一行數(shù)據(jù)里增加一個(gè)屬性edit，this.$set(v, "edit", false);，組件標(biāo)簽里用v-show=“scope.row.edit 進(jìn)行顯示隱藏。$set官方解釋?zhuān)ㄏ蝽憫?yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性）。

2.編輯由于input是雙向綁定，輸入的時(shí)候就改變了數(shù)據(jù)，點(diǎn)擊取消時(shí)，需恢復(fù)原來(lái)的數(shù)據(jù)。需 “拷貝” 一份原來(lái)的數(shù)據(jù)，如取消則使用這個(gè)數(shù)據(jù)。代碼有兩部分，一部分是只針對(duì)一列，名字寫(xiě)實(shí)，理解思路。另一部分是實(shí)際項(xiàng)目開(kāi)發(fā)能用到的，每一列都可編輯，并且名字可變。代碼如下：

（1）理解思路，title列進(jìn)行可編輯

        請(qǐng)求table數(shù)據(jù)
        this.$http.get(this.tableUrl).then(response => {
        let commTable1 =response.data.tableData;
        this.list = commTable1 .map(v => {
             this.$set(v, "edit", false); 
              v.oldTitle = v.title ; 
              return v
            })
        })
        點(diǎn)擊保存
        save(row) {
          row.edit = false
          row.oldTitle = row.title
        }
       點(diǎn)擊取消
       cancel(row) {
          row.title = row.oldTitle
          row.edit = false
       }

（2）table每一列進(jìn)行編輯

        table請(qǐng)求數(shù)據(jù)
        this.$http.get(this.tableUrl).then(response => {
         response = response.data;
         let commTable1 =response.tableData;
         this.commTable= commTable1.map(v => {
              for(var obj in v){
                   v[`old${obj}`]=v[obj]
               }
              this.$set(v, "edit", false);
                   return v
              })
           });
         點(diǎn)擊保存
         save(row) {
              for(var obj in row){
              let str = "";
              if(obj.indexOf("old")>-1){
                  str = obj.replace("old","");
                  row[obj]=row[str];
                }
              }
              row.edit = false
            }
         }
       點(diǎn)擊取消
       cancel(row) {
           let str = "";
            if(obj.indexOf("old")>-1){
               str = obj.replace("old","");
                row[str]=row[obj];
             }
           }
       row.edit = false;
     }

不管是vue的過(guò)渡動(dòng)畫(huà)，還是element的過(guò)渡動(dòng)畫(huà)，都是需要高度固定，無(wú)法滿(mǎn)足需求。接下來(lái)是一個(gè)大神封裝的一個(gè)函數(shù)式組件，這個(gè)組件只適用于單個(gè)內(nèi)容，如果內(nèi)容是v-for循環(huán)，且高度不固定，我做了一下改裝，使用的是vue 的transition-group。Vue.JS實(shí)現(xiàn)垂直方向展開(kāi)、收縮不定高度模塊的JS組件

const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out"
    const Transition = {
     "before-enter" (el) {
            el.style.transition = elTransition
            if (!el.dataset) el.dataset = {}
    
            el.dataset.oldPaddingTop = el.style.paddingTop
            el.dataset.oldPaddingBottom = el.style.paddingBottom
    
            el.style.height = 0
            el.style.paddingTop = 0
            el.style.paddingBottom = 0
    },
    
     "enter" (el) {
            el.dataset.oldOverflow = el.style.overflow
            if (el.scrollHeight !== 0) {
            el.style.height = el.scrollHeight + "px"
            el.style.paddingTop = el.dataset.oldPaddingTop
            el.style.paddingBottom = el.dataset.oldPaddingBottom
            } else {
            el.style.height = ""
            el.style.paddingTop = el.dataset.oldPaddingTop
            el.style.paddingBottom = el.dataset.oldPaddingBottom
            }
    
            el.style.overflow = "hidden"
    },
    
     "after-enter" (el) {
            el.style.transition = ""
            el.style.height = ""
            el.style.overflow = el.dataset.oldOverflow
        },
    
     "before-leave" (el) {
            if (!el.dataset) el.dataset = {}
            el.dataset.oldPaddingTop = el.style.paddingTop
            el.dataset.oldPaddingBottom = el.style.paddingBottom
            el.dataset.oldOverflow = el.style.overflow
    
            el.style.height = el.scrollHeight + "px"
            el.style.overflow = "hidden"
        },
    
     "leave" (el) {
            if (el.scrollHeight !== 0) {
            el.style.transition = elTransition
            el.style.height = 0
            el.style.paddingTop = 0
            el.style.paddingBottom = 0
        }
      },
    
     "after-leave" (el) {
            el.style.transition = ""
            el.style.height = ""
            el.style.overflow = el.dataset.oldOverflow
            el.style.paddingTop = el.dataset.oldPaddingTop
            el.style.paddingBottom = el.dataset.oldPaddingBottom
        }
    }
    
    export default {
     name: "VerticalToggle",
     functional: true,
        render (h, { children }) {
            const data = {
                 on: Transition
            }
            return h("transition", data, children)
        }
    }

組件中可這樣使用

 import verticalToggle from "./vertical-toggle.js";
  
    
123
  

以上適用于單個(gè)內(nèi)容，如果內(nèi)容是v-for循環(huán)，且高度不固定，使用的是vue 的transition-group
**vue組件：**

    
         

            {{item2.name}}
         
    

方法：

    enter(el){
        el.style.height = el.scrollHeight + "px";
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
    },
    beforeLeave(el){
       el.dataset.oldPaddingTop = el.style.paddingTop
       el.dataset.oldPaddingBottom = el.style.paddingBottom
       el.dataset.oldOverflow = el.style.overflow
       el.style.height = el.scrollHeight + "px"   
       el.style.overflow = "hidden"
    },
    leave(el){
       el.style.height = 0
       el.style.paddingTop = 0
       el.style.paddingBottom = 0
      },

}
css：

     .fade2-enter-active,.fade2-leave-active {
         transition: all .5s;
    }
     .fade-enter,.fade2-enter,.fade-leave-to,.fade2-leave-to{
         height: 0px;
    }

如果有需求是還要在顯示的組件里添加內(nèi)容，則還需下面代碼，因?yàn)閠his.$refs不支持響應(yīng)，所以就在updated生命周期里寫(xiě)了。

     updated() {
         if(this.flog1){
         for(let obj of this.list){
             let index=this.list.indexOf(obj)
             this.$refs.fade[index].style.height="auto";
         }
         this.flog2=false;
        }
      },

data為異步獲取的數(shù)據(jù)，想傳遞給子組件使用

子組件child.vue

子組件的html中的{{childData}}的值會(huì)隨著父組件的值而改變，但是created里面的卻不會(huì)發(fā)生改變(生命周期問(wèn)題)
解決辦法：我這里給出我經(jīng)常用的兩種常用的解決方案，還有其他的解決方案 https://www.jb51.net/article/...。
1.在父組件使用v-if 方法

2.子組件使用watch來(lái)監(jiān)聽(tīng)父組件改變的prop，使用methods來(lái)代替created,既然created只會(huì)執(zhí)行一次，但是又想監(jiān)聽(tīng)改變的值做其他事情的話(huà)，可使用這個(gè)方法。

以上是整理的內(nèi)容。