The main article blog I recorded with vue encountered in the development of a real project, after all, easy to find and easy to run into problems and solutions, paste the following code from the actual project I do.
If you have a better solution Guestbook Comments
A handover value is not displayed .tab
Code before modification (independent code has been removed), then switch back and forth Tab, component details (rich text component) value is not displayed
<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) // external introduction means, the rich text component
data () {
external introduction meansconst changeLog = resolve => require (
export default {
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>
The revised Code
<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-the bind: IS = "ChangeLog" " > < / component> // dynamic component
</ Keep-Alive>
</ EL-Tab-Pane>
</ EL-tabs>
</ Template>
<Script>
const exactlyInfo Resolve = => the require ([ './ exactlyInfo.vue' ], resolve) // external introduction means, the rich text component
const changeLog = resolve => require ( [ './ changeLog.vue'], resolve) // external introduction means
Export default {
Data () {
return {
activeName: ' exactlyInfo ',
exactlyInfo,
changeLog,
};
},
Components: {
'exactly-info': exactlyInfo
},
Methods: {
the handleClick (Tab, Event) {// display the corresponding switch assembly Tab
Switch (tab.name) {
Case 'exactlyInfo':
this.exactlyInfo = exactlyInfo ;
break;
case 'changeLog':
this.changeLog = changeLog
break;
}
}
}
};
</script>
Workaround: Show Hidden v-if vue control components to achieve the effect of re-rendering components
II. Method subassembly before the parent assembly method is performed, resulting in the subassembly receiving parent element is empty.
Solution: hidden by default by v-if vue let the parent page, parent page initialization is complete again be displayed directly on the code
<Template>
<div v-IF = "isShowPage ">
<Child-the Component: the Data = "parentData"> </ Child-the Component> // sub-components have their own implementation methods and life cycle may be performed prior to a parent component In this case it is empty parentData
</ div>
</ Template>
<Script> Export default { Data () { reutrn { isShowPage: to false ,
parentData: {}
}
}
Mounted () { the this .init ()},
Methods: {
the init () {// initialization method
this.parentData = {name: 'parent' } // parent component subassembly to pass value
the this .isShowPage = to true } } } </ Script>