美文网首页
vue 动态组件传递参数,跳转对应组件重新加载数据

vue 动态组件传递参数,跳转对应组件重新加载数据

作者: 舒尔诚 | 来源:发表于2019-05-14 20:25 被阅读0次

例如自定义变量:callbackdata
父组件:
<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: {
handler(newVal) {
//alert('call---'+newVal.questionId);
//alert('call---'+newVal);
alert("---call----"+callbackdata.questionId);
//TODO

  },   
  deep: true,   
  immediate: true
} 

}

</script>

以上通过监视变量callbackdata的变化,来达到父组件控制子组件

相关文章