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>

 

posted @ 2017-11-20 16:41  黄鹂  阅读(20102)  评论(0编辑  收藏  举报