美文网首页
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的变化,来达到父组件控制子组件

    相关文章

      网友评论

          本文标题:vue 动态组件传递参数,跳转对应组件重新加载数据

          本文链接:https://www.haomeiwen.com/subject/lxzeaqtx.html