记录vue在实际工作项目中遇到的问题及解决方案

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

以上是 记录vue在实际工作项目中遇到的问题及解决方案 的全部内容， 来源链接： utcz.com/z/376289.html

回到顶部