zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [译]Stairway to Integration Services Level 3
    [译]SSRS 报表版本控制
    java was started but exit code =-805306369
    There is no session with id XXX
    spring 线程安全
    navicat远程连接阿里云ECS上的MYSQL报Lost connection to MySQL server at 'reading initial communication packet'
    navicat链接阿里云mysql报80070007: SSH Tunnel: Server does not support diffie-hellman-group1-sha1 for keyexchange
    eclipse中的tomca的编辑页面server location灰色
    tomcat tomcat-user.xml被还原
    java元注解
  • 原文地址:https://www.cnblogs.com/xiaomili/p/7867013.html
Copyright © 2011-2022 走看看