该篇博客主要记录本人在用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>
