记录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':
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">
pane<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.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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。