記錄vue在實際工作項目中遇到的問題及解決方案

    該篇博客主要記錄本人在用vue開發實際項目中遇到的畢竟容易碰到和不易發覺的問題及解決方案，下面所貼的代碼來自我做的實際項目。

如果大家有更好的解決方案歡迎留言評論

一.tab切換值不顯示

    修改前的代碼（無關代碼已去除），此時來回切換tab，詳細信息組件（富文本組件）值不顯示

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="詳細信息" name="exactlyInfo">
       <exactly-info  v-bind="$attrs" ></exactly-info>
    </el-tab-pane>
    <el-tab-pane :label="changeLogTitle" name="changeLog">
        <keep-alive>
            <component ref="changeLog"  v-bind:is="changeLog" "></component>    //動態組件
        </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
const exactlyInfo = resolve => require(['./exactlyInfo.vue'], resolve)  //外部引入組件，富文本組件
const changeLog= resolve => require(['./changeLog.vue'], resolve)  //外部引入組件
export default {
    data () {
        return {
            activeName: 'exactlyInfo',
            exactlyInfo,
            changeLog,
        };
    },
    components: {
        'exactly-info': exactlyInfo
    },
    
    methods: {
        handleClick (tab, event) {  //tab切換顯示對應組件
            switch (tab.name) {
            case 'exactlyInfo':
                this.exactlyInfo = exactlyInfo;
                break;
            case 'changeLog':
                this.changeLog = changeLog
                break;
            }
        }
    }
};
</script>

 修改后的代碼

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="詳細信息" name="exactlyInfo">
       <exactly-info  v-bind="$attrs"v-if="isShowExactlyInfo"></exactly-info>

    </el-tab-pane>
    <el-tab-pane :label="changeLogTitle" name="changeLog">
        <keep-alive>
            <component ref="changeLog"  v-bind:is="changeLog" "></component> //動態組件 </keep-alive> </el-tab-pane> </el-tabs> </template> <script> const exactlyInfo = resolve => require(['./exactlyInfo.vue'], resolve) //外部引入組件，富文本組件 const changeLog= resolve => require(['./changeLog.vue'], resolve) //外部引入組件 export default { data () { return { activeName: 'exactlyInfo', exactlyInfo, changeLog,

              isShowExactlyInfo: true,

 }; }, components: { 'exactly-info': exactlyInfo }, methods: { handleClick (tab, event) { //tab切換顯示對應組件 switch (tab.name) { case 'exactlyInfo': this.exactlyInfo = exactlyInfo;

                  this.isShowExactlyInfo = true  //新增

 break; case 'changeLog': this.changeLog = changeLog

 　　　　　　　　　　this.isShowExactlyInfo = false //新增

                break;
            }
        }
    }
};
</script>

解決方法：通過vue的v-if控制組件的顯示隱藏來達到重新渲染組件效果

 

二.子組件中的方法先於父組件中的方法執行，導致子組件接收到父組件的值為空。

      解決方法：通過vue的v-if先讓父頁面默認隱藏，待父頁面初始化完成再顯示，直接上代碼

 

<template>
    <div v-if="isShowPage"> 
      <child-component :data="parentData"></child-component> //子組件有自己的執行方法和生命周期，可能會先於父組件執行，此時parentData就為空
    </div> 
</template> 
<script> 
export default { 
 data(){ 
 reutrn { 
 isShowPage: false ,

           parentData: {}

 } 
 } 
 mounted(){ this.init() }, 
 methods：{ 
 init（）{ //初始化方法
 this.parentData={name:'parent'} //父組件給子組件傳值
 this.isShowPage=true 
 } 
 } 
} 

</script>