vue 动态组件,传递参数
<template> <div class="top"> <div class='nav'> <ul class='navHader'> <li @click="current='Sunyi'" :class="{active:current=='Sunyi'}">损益完成情况分析表</li> <li @click="current='Caiwu'" :class="{active:current=='Caiwu'}">财务快报资产分析表</li> <li @click="current='Jingying'" :class="{active:current=='Jingying'}">经营指标完成情况分析表</li> </ul> <Menus></Menus> </div> <keep-alive> <component :is="current" :callbackdata="callbackdata"></component> </keep-alive> </div> </template>
<script> import Menus from "./Button.vue" import Sunyi from "./Tables/Sunyi.vue" import Jingying from "./Tables/Jingying.vue" import Caiwu from "./Tables/Caiwu.vue" export default { data() { return { current: 'Sunyi', navs: [ '损益完成情况分析表', '财务快报资产分析表', '经营指标完成情况分析表', ], callbackdata:{},//返回数据 } }, mounted() { this.toggleSwitch(this.current) }, methods: { toggleSwitch(parameter) { const self = this; let this_toggle = parameter; switch (this_toggle) { case 'Sunyi': self.toggleDatainit('pl'); break; case 'Caiwu': self.toggleDatainit('bs'); break; case 'Jingying': self.toggleDatainit('t1'); break; } }, toggleDatainit(talbel_url) { const self = this; self.$http.get('getInitTable/init/'+talbel_url).then(res => { if(res.data.status == 2000){ console.log(res.data); self.callbackdata = res; } }).then(error => { }); }, }, components: { Menus, Sunyi, Caiwu, Jingying }, watch:{ current(newV){ this.toggleSwitch(newV); } } } </script>
在子组件中接收参数
<script> import Tools from '../../tools/tools' export default { data() { return { HT: new Tools(),// 实例一个对象 HTobjData: '',// HT的一个大集合 } }, props: { callbackdata: { type: Object, default: {} } }, mounted() { }, methods: { init(callbackdata) { const self = this; self.HTobjData = self.HT.init(callbackdata, self, Handsontable); } }, components: {}, watch: { callbackdata(newV) { this.init(newV); } } } </script>